CSS3アニメーションのディレクション

CSS3のアニメーション方向プロパティの詳細説明:
このプロパティは、アニメーションアニメーションが逆方向に移動できるかどうかを設定するために使用されます。
アニメーション属性の詳細については、CSS3でのアニメーション属性の使用法の詳細な説明を参照してください。
文法構造:

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

パラメータ分析:
1.normal: アニメーションは法線方向に実行されます。
2.alternate: 正方向と逆方向を交互に切り替えます。
特記事項:
複数の属性値を指定する場合は、カンマで区切ってください。
対応するスクリプト機能はanimationDirectionです。
コード例:

<!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>

上記のコードは、アニメーションを通常方向と逆方向に交互に設定できます。

<!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>

上記のコードは、2 つのアニメーションをそれぞれ設定できます。1 つは 2 つの方向に交互に実行でき、もう 1 つは通常の方向にのみ実行できます。

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear