成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

CSS3 animation動(dòng)畫(huà),循環(huán)間的延時(shí)執(zhí)行該怎么弄?

瀏覽:160日期:2023-08-08 18:47:26

問(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à)就可以了。

標(biāo)簽: CSS
相關(guān)文章: