CSS3アニメーションの遷移時間

CSS3のanimation-durationプロパティの詳細説明:
このプロパティは、アニメーションアニメーションの遷移時間を設定するために使用されます。
アニメーション属性の詳細については、CSS3 でのアニメーション属性の使用法の詳細な説明の章を参照してください。
文法構造:

animation-duration：<time> [ ,<time>]*

パラメータ分析:
time: アニメーションの実行時間を指定します。単位は秒(s)です。
特記事項:
複数の属性値を指定する場合は、カンマで区切ってください。
対応するスクリプト機能はanimationDurationです。
コード例:
例 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:theanimation infinite alternate;
  -webkit-animation:theanimation infinite alternate ;
  -moz-animation:theanimation infinite alternate ;
  -o-animation:theanimation infinite alternate ;
  -ms-animation:theanimation infinite alternate ;
   
  -webkit-animation-duration:8s;
  -moz-animation-duration:8s;
  -o-animation-duration:8s;
  -ms-animation-duration:8s;
  animation-duration:8s;
}
@keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
  0% {top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上記のコードは、アニメーションの継続時間を 8 秒に設定します。
例 2:

<!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 infinite alternate,secondanimation infinite alternate; 
  -webkit-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -moz-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -o-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -ms-animation:firstanimation infinite alternate,secondanimation infinite alternate;
    
  -webkit-animation-duration:5s,2s;  
  -moz-animation-duration:5s,2s;  
  -o-animation-duration:5s,2s;  
  -ms-animation-duration:5s,2s;    
  animation-duration:5s,2s;  
}
@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>

上記のコードは、animation-duration を使用して、2 つのアニメーションの 2 つのアニメーション期間をそれぞれ指定します。

学び続ける

新しいファイル

<!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 infinite alternate; -webkit-animation:theanimation infinite alternate ; -moz-animation:theanimation infinite alternate ; -o-animation:theanimation infinite alternate ; -ms-animation:theanimation infinite alternate ; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; -ms-animation-duration:8s; animation-duration:8s; } @keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-moz-keyframes theanimation{ 0% {top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-webkit-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-o-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } </style> </head> <body> <div></div> </body> </html>

提出するリセットコード

自動運転