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.
CSS animations (part 2)
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...
