Let's add an animation for the shark image to get a different perspective of what animations can do, and have it occur every time the page loads. We'll name it crazyShark:
nav figure { position: absolute; top: -20px; left: 50px; animation-name: crazyShark; animation-duration: .25s; animation-timing-function: ease;}@-webkit-keyframes crazyShark {}nav img { width: 160px;}
Let's add a bunch of @keyframes that are translating and simultaneously rotating the shark image:
@keyframes crazyShark { 0% {transform: translate(90%, 70%);} 33% {transform: translate(40%, 20%) rotate(90deg);} 66% {transform: translate(10%);} 100% {transform: translate(0%) rotate(0deg);}}
Now, let's go to our animation properties ...
