首頁  >  文章  >  web前端  >  animation-duration屬性有什麼用

animation-duration屬性有什麼用

青灯夜游
青灯夜游原創
2019-01-31 10:47:535604瀏覽

animation-duration 屬性是用來定義動畫完成一個週期所需的時間,以秒或毫秒計;當值為0是,表示無動畫效果。

animation-duration屬性有什麼用

CSS3  animation-duration屬性

作用:animation-duration 屬性定義動畫完成一個週期所需的時間,以秒或毫秒計。

語法:

animation-duration: time

time:規定完成動畫所花費的時間。預設值是 0,意味著沒有動畫效果。    

附註:Internet Explorer 9 以及更早的版本不支援 animation-duration 屬性。

CSS3  animation-duration屬性的使用範例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:2s;

/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注:</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注:</b>始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</p>

</body>
</html>

效果圖:

animation-duration屬性有什麼用

以上就是本篇文章的全部內容,希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位! ! !

以上是animation-duration屬性有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn