CSS ANIMATION

CSS animation property allow us to creatin animation effect for change in element's style.

Lets first see an example and then further understand its key features.

Output:

Building blocks of CSS animation

There are two building blocks of CSS animation:

1. @keyframes - It creates the platform for animation.


2. keyframes animation properties - Inside keyframes animation properties are specified. The animation properties are defined either in terms of to and from or in percentage form.

Steps to create animation

Step 1:- Create @keyframes inside style tag.

Step 2:- Name @keyframes to be used further. Example: @ketframes My_animation { ... }

Step 3: - Define CSS configuration inside keyframes for animation.

Step 4: - Mention animation-name with desired element you want animation for.
Example: div{ animation-name: My_animation;} .

Output:

CSS animation delay

The animation-delay property specifies the delay time for animation to start.