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
Output:
Animation
Building blocks of CSS animation
There are two building blocks of CSS animation:
- @keyframes - It creates the platform for animation.
- 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.
Example
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
Output:
Animation
CSS animation delay
The animation-delay property specifies the delay time for animation to start.
Example