CSS Animation

CSS animation is a useful and powerful tool. It makes a website interesting and creatively exciting, In this article, we round up some of the coolest CSS animations. The animation property in CSS can be used to animate many other CSS properties such as color height width. Each animation needs to be defined with the @keyframes.CSS animations are initiated by specifying keyframes for the animation these keyframes contain the styles that the element will have. Now we discuss some CSS animation properties.

1.@keyframes: It is used to specify the animation.
Syntax:
@keyframes slidein {
from {
transform: translateX(0%);
}

to {
transform: translateX(100%);
}
}
2.animation: This is a property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
Syntax:
animation
[ name duration timing-function delay iteration-count direction fill-mode play-state ]

3.animation-delay: It specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

4.animation-direction: This property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

5.animation-duration: It specifies the time duration taken by the animation to complete one cycle.

6.animation-timing-function: establishes preset acceleration curves such as ease or linear. A keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property.

7.animation-iteration-count: the number of times the animation should be performed. This property is specified as one or more comma-separated values.
6.animation-fill-mode: This property sets which values are applied before/after the animation.
animation-play-state: It specifies if the animation is running or paused.
9.animation-name: It specifies the name of @keyframes animation.

we can comma-separate the values to declare multiple animations on a selector as well. Animating most properties is a performance concern. So, there are certain combinations that can be animated safely:
transform: translate()
transform: scale()
transform: rotate()
opacity