Earlier this week we spoke about some helpful UX tips to keep in mind when you are creating animations for your website.
If you're new to web animations, however, it may be helpful to take a dive into leveraging CSS animations to make your website more sleek, memorable, and usable.
Keyframes
The key to creating CSS animations is understanding keyframes (see what I did there?), which are the unique states that an object goes through in its animation.
Every CSS animation must have at least two keyframes, each with a specific styling. The object being animated will then gradually transition between the styles of each keyframe.
Using keyframes, we can define animation in CSS like so:
While in that example we only have two keyframes, one at the beginning and one at the end, keep in mind that we can define additional keyframes for any point in the animation.
We can then assign a style to this animation by its name like so:
And there you go, you've animated a simple fade-in effect.
Getting Fancy
Don't worry though, CSS has a lot more ways than just duration to configure your animation. Let's go through them:
animation-delay - Exactly what it sounds like. Delays the start of your animation
animation-iteration-count - How many times the animation will run, put 'infinite' for it to repeat forever
animation-direction - Can be forward, backward, alternate (Run forwards then backward), or alternate-reverse (Run backward then forwards)
animation-timing-function - We explained the concept of easing functions in this article, but it is basically the pace at which you want the animation to run. You will normally want this set to ease, ease-in, or ease-out
animation-fill-mode - After the animation is finished, do you the element to retain its starting (backward) or ending (forwards) state
Some Simple Demos
With that in mind, here are some simple animations you can make:
Color Changing Background:
Loading Icon:
Expanding Button:
Next Steps
CSS Animations continue to be one of the easiest ways to add some life to your website. Keep in mind, however, that they are far from the only way.
There are plenty of animation libraries to pair well with your favorite javascript frameworks, not to mention the good amount of animation that can be done with HTML canvas and some simple javascript.
Have any questions about CSS animations? Drop them down below.
Happy coding from your good friends at Codesphere, the next generation cloud provider
Top comments (1)
Awesome work!