Detailed explanation of animation-direction property of CSS3:
This property is used to set whether animation animation can move in reverse direction.
For more information about the animation attribute, please refer to the detailed explanation of the usage of the animation attribute of CSS3.
Grammar structure:
animation-direction：normal | alternate [ , normal | alternate ]*
Parameter analysis:
1.normal: The animation runs in the normal direction.
2.alternate: Alternate normal direction and reverse direction.
Special instructions:
If multiple attribute values are provided, separate them with commas.
The corresponding script feature is animationDirection.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite;
-webkit-animation:theanimation 5s infinite;
-moz-animation:theanimation 5s infinite;
-o-animation:theanimation 5s infinite;
-ms-animation:theanimation 5s infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;
-moz-animation-direction:alternate;
-o-animation-direction:alternate;
-ms-animation-direction:alternate;
}
@keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code can set the animation to move alternately in the normal direction and the opposite direction.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s infinite,secondanimation 2s infinite;
-webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-moz-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-o-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-ms-animation:firstanimation 5s infinite,secondanimation 2s infinite;
animation-direction:alternate,normal;
-webkit-animation-direction:alternate,normal;
-moz-animation-direction:alternate,normal;
-o-animation-direction:alternate,normal;
-ms-animation-direction:alternate,normal;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The above code can set two animations respectively. One can run alternately in two directions, and the other can only run in the normal direction.
