Home > Web Front-end > CSS Tutorial > How to use the animation-direction property

How to use the animation-direction property

青灯夜游
Release: 2019-01-31 11:42:57
Original
5597 people have browsed it

The animation-direction attribute is used to define whether the animation should be played in reverse in turn; when the animation is played more than once, we can realize the animation in reverse by setting the value of animation-direction to alternate.

How to use the animation-direction property

CSS3 animation-direction property

Function:Defines whether it should take turns Play animation in reverse.

Syntax:

animation-direction: normal|alternate;
Copy after login

normal: Default value. The animation should play normally.

alternate: The animation should be played in reverse in turn.

Note: If the animation-direction value is "alternate", the animation will play normally in odd numbers (1, 3, 5, etc.), and in even numbers (2, 4, etc.) , 6, etc.) plays backward.

Note: If the animation is set to play only once, this attribute has no effect.

CSS3 animation-direction property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>
Copy after login

Rendering:

How to use the animation-direction property

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the animation-direction property. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template