What is animation in css

Animation in css is an abbreviation attribute, used to set animation attributes, such as [animation-duration], which specifies the time it takes to complete the animation. This attribute must be specified, otherwise the animation duration will be 0 and cannot be played.

The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.

animation attribute is an abbreviated attribute used to set six animation attributes:

(Learning video recommendation: css video tutorial)

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Comment : Please always specify the animation-duration attribute, otherwise the duration will be 0 and the animation will not be played.

Syntax:

animation: name duration timing-function delay iteration-count direction;

animation-name specifies the keyframe name that needs to be bound to the selector. .​

animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.

animation-timing-function Specifies the speed curve of animation.

animation-delay Specifies the delay before the animation starts.

animation-iteration-count Specifies the number of times the animation should be played.

animation-direction Specifies whether the animation should be played in reverse in turn.

Example:

Use abbreviation attributes to bind animation to div elements:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

Related recommendations:CSS tutorial

The above is the detailed content of What is animation in css. For more information, please follow other related articles on the PHP Chinese website!