CSS3 动画方向

CSS3的animation-direction属性详解:
此属性用于设置animation动画是否可以反向运动。
更多关于animation属性内容可以参阅CSS3的animation属性用法详解一章节。
语法结构:

animation-direction：normal | alternate [ , normal | alternate ]*

参数解析:
1.normal:动画正常方向运行。
2.alternate:正常方向与反方向交替。
特别说明:
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationDirection。
代码实例:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.php.cn/" />  
<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>

以上代码可以设置动画正常方向与反方向交替运动。

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.php.cn/" />   
<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>

以上代码可以分别设置两个动画一个是两个方向交替运行，一个只能够以正常方向运行。

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <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>

einreichen Code zurücksetzen

Automatische Operation

CSS3 动画方向

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]