Introduction
CSS animation is sometimes a little less used skill for many developers. This post will help us to get started with the basics.
Lets dive into some code to get started.
Step0 – Element
To start with, we need an element to animate.
I have a div with some CSS styling applied as shown below
Let’s animate this div.
Step1 – Define keyframe (animation)
Step2 – Apply animation to element
Now we can simply apply above defined show animation to the target element as follows
It will result in a fade-in like effect in browser.
You can also change few properties and check the resulting effect
Staggering animation
Putting one animation after other.
We can create multiple animations and link them using delays equivalent to the duration of the previous-animation.
This works but its not very DRY.
Note: animation behavior can differ between browsers.
Another Animation Example
This time, lets animate an SVG
Its a simple SVG, contains a rect as shown in the picture. To animate, lets add CSS styles as follows
and if we test it in browser, we’ll see green box moving in left and right directions.
You can check more details about CSS animations by visiting Mozilla docs.
Some external libraries
- Velocity JS (simple, jQuery style)
- Greensock (not free)
- Bodymovin (check license)
Summary
This was a very basic introduction of CSS animation. Let me know if any comments and or questions. Till next time, Happy Coding.