Mastering CSS

animation-fill-mode

The animation-fill-mode property tells the element being animated what to do with itself before the animation starts and after the animation completes. Using animation-fill-mode fills the space before and/or after the animation. We don't need an animation-fill-mode property yet. That's because the shark animation starts on page load and then lands the shark in its static position—we're saying no translate and no rotate:

 100% {transform: translate(0%) rotate(0deg);}

However, what if we end the animation with x at 10 percent, y at 70 percent, and a rotation at 10 degrees?

 100% {transform: translate(10%, 70%) rotate(10deg);}

If you apply this and go to the site, you'll notice that the shark seems to end the animation near ...