在css3中,可以利用“animation-delay”屬性來設定動畫延遲幾秒,該屬性的作用就是定義動畫什麼時候開始,屬性值的單位可以是秒“s”也可以是毫秒“ ms”,語法為“animation-delay: time;”。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
animation-delay 屬性定義動畫何時開始。
animation-delay 值單位可以是秒(s)或毫秒(ms)。
提示: 允許負值,-2s 使動畫馬上開始,但跳過 2 秒進入動畫。
語法
animation-delay: time;
time可選。定義動畫開始前等待的時間,以秒或毫秒計。預設值為0
範例如下;
##
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; animation-delay:3s; /*Safari 和 Chrome*/ -webkit-animation:mymove 5s infinite; -webkit-animation-delay:3s; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari 和 Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意:</strong>animation-delay 属性不兼容 Internet Explorer 9以及更早版本的浏览器。</p> <div></div> </body> </html>
## (學習影片分享:
css影片教學以上是css3動畫怎麼設定延遲幾秒的詳細內容。更多資訊請關注PHP中文網其他相關文章!