溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css3如何設置動畫幾秒后播放”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在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如何設置動畫幾秒后播放”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
