CSS Animations:
What is animation in CSS?
In CSS, animating an element means taking an element from one state to another state.
Usually, from its initial state to final state. (The 2 states in animation)
Initial state means - at the start of the animation – how the element is.
Final state means – at the end of the animation – how the element is.
Basically, animation is a journey between initial state and final state of an element.
For doing animations in CSS, there are 2 steps to follow.
-1st step is creating the animation and 2nd step is applying the created animation.
1st step: Creating the animations
First, write “@keyframes”, then write the identifier(name of the animation)
and then within {} – write the CSS code for initial state and final state or any other state we want to
work with.
General syntax:
(Or)
(or)
(or) (order does not matter)
Eg: Eg2:
2nd step: Applying the animation to an element.
- To apply the created CSS animation to an element, inside the element’s styling body{},
We have to write 2 properties – 1. "animation-name" and 2. "animation-duration".
[Link] the property - "animation-name" and write "the name of the animation which we want to apply
here" as the value of this property. (This will apply “the CSS animation which we created with that
name” to this selected element )
[Link] write the property - "animation-duration" and write "how much time the animation should
take to complete" as its value. If the animation-duration property is not specified, no animation will
occur, because the default value is 0s. (animation-duration: sets the time duration of the animation).
Eg:
Eg2:
Other CSS animation properties:
[Link]-delay:-
Here, Delay means to delay/postpone the start of the animation.
The animation-delay CSS property specifies the amount of time to wait from applying the animation
to an element before beginning to perform the animation.
-If I set animation-delay as 2s, then only after 2s , the animation will be applied to the element. Until
2 seconds, the animation won’t happen.
For example:
-Negative values are also allowed. If using negative values, the animation will start as if it had already
been playing for N seconds.
For example:
If I set animation-delay as -2s, then the animation will start as if it had already been playing for 2
seconds:
[Link]-iteration-count:-
The “animation-iteration-count” property sets the number of times an animation should run.
For example :
-If I set its value as 3, then the animation will run 3 times before it stops.
-If I set its value as infinite, then the animation will repeatedly run forever.
3. animation-fill-mode:-
Using this property, we can set the style/state of the element after the animation is over.
If I set its value as “forwards”, then after the animation is over, the style of the element at final state
will be applied to the element after its animation is over.
If I set its value as “backwards”, then after the animation is over, the style of the element will be set
to its style it had before the animation started. (default)
Other values of this property are “none”, “both”, etc.
Eg:
[Link]-timing-function:-
The animation-timing-function property sets the speed curve of the animation.
The animation-timing-function property can have the following values:
ease - Sets an animation with a slow start, then fast, then end slowly (this is default)
linear - Sets the animation’s speed with the same speed from start to end
ease-in =>start slowly and then go in normal speed
ease-out => Start normally and slowdown in end.
ease-in-out => slow start and slow end.
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function.
-with cubic-bezier function, we can set our own speed curve of the animation.
For the values, we can go to “[Link]” and get the values for the speed curve
that we want in our animation.
[Link]-direction:
This property simply sets the animation’s direction of flow.
By default, the animation takes the element’s style from initial position to final position, meaning the
animation goes in (“normal”) forward direction.
And if we want , then we can also change the direction in which “ the animation happens” to
“reverse” direction, or to “alternate” directions or “alternate—reverse” direction using the property:
animation-direction.
The animation-direction property can have the following values:
normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards.
6. animation-play-state : Specifies whether the animation is running or paused.
shorthand animation property:
The same animation effect as above can be achieved by using the shorthand animation property:
-We can set all these above 6 properties in one go using the shorthand animation property.