Understanding CSS Animations
CSS Animations change the appearance and behavior of various elements in web pages. They are defined using the @keyframes
rule, which specifies the animation properties of the element and the specific time intervals at which those properties should change.
Syntax:
/*property-name*/: /*value*/;
Animation Properties:
There are certain animation properties given below:
Property | Description |
---|---|
It is used to specify the name of the @keyframes describing the animation. | |
It is used to specify the time duration it takes animation to complete one cycle. | |
It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out. | |
It specifies the delay of the start of an animation. | |
This specifies the number of times the animation will be repeated. | |
It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse. | |
It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both. | |
This property specifies whether the animation is running or paused. |
CSS Animations
CSS Animations are a powerful tool that allows you to control the motion and display of elements on your web pages. They consist of two parts: one that describes the animation of the elements, and another that contains keyframes indicating the animation properties of the element at specific time intervals.