Tutorials Tonight's Logo


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.



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;} .

Note: You must mention animation-duration property otherwise animation will not take place because a default value 0 is set to the animation-duration.



CSS animation delay

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