tutorialstonight logo
A Platform To Learn To Code

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.

Example

Run the code

Output:

Animation


Building blocks of CSS animation

There are two building blocks of CSS animation:

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

  2. Example

  3. 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.

  4. Example


    Example



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.

Example

Run the code

Output:

Animation


CSS animation delay

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

Example

Run the code