When to Use CSS Animation
Use CSS Animation for Loading Screens
Loading screens are simple enough. While hopefully your website doesn’t need to have one, if it takes more than 3 seconds for a page to load, you should include one. This way, users will know that something is happening. A loading animation can be simple: a circle spinning, a ball bouncing, an hourglass spilling sand, etc. It’s a great time to implement a simple CSS animation on your website.
Use CSS Animation for Secondary Actions
Use CSS Animation for Buttons
CSS animation is a good solution if you want to animate buttons on your website. For example, you could have a hover animation, where the button changes color. Or you could have a grow/shrink animation, which plays continuously so users know where to click. There are other possibilities for button animation with CSS. To see some great examples, Codrops has made a couple of their own.
While you definitely cannot replace all animations on your website with CSS animation, you can sprinkle them in here and there. They’re an added bonus to attract the eyes of visitors.