Moving items draw in more consideration and add a flavor to the page, CSS animations are an element in CSS that permits animating DOM component without utilizing any javascript or glimmer modules, right now, will acquaint all the properties related with animations.
To make the animation works, we need to understand the following syntax:
.animate-class {
animation: name duration timing-function delay iteration-count direction fill-mode;
}
@keyframes name-of-the-keyframe {
0% {
property-to-animate:value-start;
}
30% {
property-to-animate:value-30pc;
}
60% {
property-to-animate:value-60pc;
}
100% {
property-to-animate:value-end;
}
}First, we select our element with the class name “animate-class” and apply the animation property. Let discuss each part of the animation property and how to use it:
Animation Properties
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
animation-name:
The animation-name CSS property sets one or more animations to apply to an element. Each name is an @keyframes at-rule that sets the property values for the animation sequence.
@keyframes name-of-the-keyframe {
0% {
width: 100px;
height: 100px;
}
100% {
width: 300px;
height: 300px;
}
}animation-duration:
The animation-duration CSS property sets the time allotment that activity takes to finish one cycle.
animation-timing-function:
The animation-timing-function takes a timing function as a value, which is a mathematical function that specifies the speed over time of an object being animated. It can also be defined using one of several predefined keywords for common timing functions.
following link describing those functions: https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
animation-delay:
Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.
animation-delay: 0s;The animation will wait zero seconds and thus start right away.
animation-delay: 1.2s;You can use decimal values in seconds with the keyword s.
animation-delay: 2400ms;You can use milliseconds instead of seconds, with the keyword ms.
animation-delay: -500ms;You can use negative values: the animation will start as if it had already been playing for 500ms.
animation-iteration-count:
The animation-iteration-coun CSS property sets the occasions a movement cycle ought to be played before stopping.
If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.
animation-direction:
The animation-direction CSS property sets whether an animation should play forwards, backward, or alternating back and forth.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;animation-fill-mode:
The animation-fill-mode property is used to specify those values that are applied by the animation before and after it is executing. Before playing the first keyframe or after playing the last keyframe CSS animations do not affect the element. The animation-fill-mode property can override this behavior.
Syntax:
animation-fill-mode: none | forwards | backwards | both | initial |
inherit;Property Value:
- none: It is the default value.
- forwards: The element will retain the same animation properties of the last keyframe after the animation completes.
- backwards: This property value is used to set the element to the first keyframe value before starting the animation.
- both: This property is used to follow the rules for both forwards and backwards.
- initial: This property is used to set the property to its default value.
- inherit: This property is used to inherits this property from its parent element.
animation-play-state:
Defines if an animation is playing or not.
animation-play-state: running;If the animation-duration and animation-name are defined, the animation will start playing automatically.
animation-play-state: paused;The animation is set paused at the first keyframe.
This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.
For Example :- https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-play-state
