CSS animations (part 2)

Our main navigation dropdown's sliding motion is complete. Now let's deep dive into CSS animations by experimenting with our shark logo and exploring other animation properties, such as delay, iteration-count, fill-mode, as well as, animation—which is the shorthand.

Animation delay, iteration-count, and fill-mode

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...