站長(zhǎng)資訊網(wǎng)
在css3中，可以利用animation-delay屬性設(shè)置動(dòng)畫(huà)幾秒后播放，該屬性可以設(shè)置對(duì)象動(dòng)畫(huà)的延遲時(shí)間，即動(dòng)畫(huà)開(kāi)始前等待的時(shí)間，以秒或毫秒計(jì)；語(yǔ)法“animation-delay: 數(shù)值+單位;”，單位可以是秒（s）或毫秒（ms）。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css3中，可以利用animation-delay屬性設(shè)置動(dòng)畫(huà)幾秒后播放。
animation-delay屬性可任意檢索或設(shè)置對(duì)象動(dòng)畫(huà)的延遲時(shí)間，即定義動(dòng)畫(huà)什么時(shí)候開(kāi)始。
語(yǔ)法：
animation-delay: time;
-
time：定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間，以秒或毫秒計(jì)（值單位可以是秒s或毫秒ms）；默認(rèn)值為0。
提示: 允許負(fù)值，-2s 使動(dòng)畫(huà)馬上開(kāi)始，但跳過(guò) 2 秒進(jìn)入動(dòng)畫(huà)。
示例：延遲5秒開(kāi)始動(dòng)畫(huà)
<!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>
（學(xué)習(xí)視頻分享：css視頻教程、web前端）
