css3怎麼設定動畫幾秒後播放
- 青灯夜游原創
- 2022-03-18 16:33:283181瀏覽
在css3中，可以利用animation-delay屬性設定動畫幾秒後播放，該屬性可以設定物件動畫的延遲時間，即動畫開始前等待的時間，以秒或毫秒計；語法「animation -delay: 數值單位;”，單位可以是秒（s）或毫秒（ms）。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css3中，可以利用animation-delay屬性設定動畫幾秒後播放。
animation-delay屬性可任意檢索或設定物件動畫的延遲時間，即定義動畫何時開始。
語法：
animation-delay: time;
time：定義動畫開始前等待的時間，以秒或毫秒計（值單位可以是秒s或毫秒ms） ；預設值為0。
提示: 允許負值，-2s 讓動畫馬上開始，但跳過 2 秒進入動畫。
範例：延遲5秒開始動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-delay: 5s;
/*Safari and Chrome*/
-webkit-animation: mymove 5s infinite;
-webkit-animation-delay: 5s;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
以上是css3怎麼設定動畫幾秒後播放的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3怎麼實現圖片消失動畫效果下一篇：css3怎麼實現圖片消失動畫效果