Native CSS Animations

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.

Subscriber Content

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.