CSS3 animation動(dòng)畫(huà),循環(huán)間的延時(shí)執(zhí)行該怎么弄?
問(wèn)題描述
如下代碼,其中的delay值為3s,但是animation按現(xiàn)在的規(guī)則,這個(gè)delay是指動(dòng)畫(huà)開(kāi)始前的延時(shí),在動(dòng)畫(huà)循環(huán)執(zhí)行間,這個(gè)delay是不生效的。
.item{ webkit-animation: revolving 1s 3s infinite; animation: revolving 1s 3s infinite;}@-webkit-keyframes revolving{ 0%{ -webkit-transform: perspective(700px) rotateX(90deg); } 50%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); }}
問(wèn)題解答
回答1:.item{ webkit-animation: revolving 4s 0s infinite; animation: revolving 4s 0s infinite;}@-webkit-keyframes revolving{ 0,75%{ -webkit-transform: perspective(700px) rotateX(90deg); } 87.5%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); }}
把總動(dòng)畫(huà)設(shè)為4秒,然后前75%也就是3秒都沒(méi)變化(0-75%),之后的25%也就是1秒做動(dòng)畫(huà)就可以了。
相關(guān)文章:
