Native CSS Animations

Photo by Michael Olsen on Unsplash

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.