CSS3動畫的轉場時長

CSS3的animation-duration屬性詳解:
此屬性用於設定animation動畫的過渡時長。
更多關於animation屬性內容可以參考CSS3的animation屬性用法詳解一章節。
語法結構:

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

參數解析:
time：規定動畫執行的時長，單位是秒（s）。
特別說明:
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationDuration。
程式碼實例:
實例一:

<!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秒。
實例二:

<!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規定了兩個動畫時間分別用於兩個動畫。

繼續學習

新建檔案

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

重置程式碼

自動運行

提交

預覽 Clear