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.

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.