帶有暫停期的循環CSS3動畫？

我想在循環中暫停後運行動畫。對於EXAMPLE，帶有暫停期的循環CSS3動畫？

@-webkit-keyframes test { 
    0% { opacity:0; } 
    50% { opacity:1; } 
    100%{ opacity:0;} 
} 
.test { 
    -webkit-animation:test 5s linear 10s infinite forwards; 
}

我想暫停/延遲動畫10s，然後做動畫的5s並重復這種循環。

上面的例子只適用於第一個週期。我如何在每個週期中誘發延遲/暫停以實現無限循環？換句話說，我需要一個15s週期，但動畫的5s全部爲keyframe（從0％到100％）。

請注意，我不打算更改keyframe百分比。

來源

2013-09-27 Googlebot

如果沒有javascript，你不可能改變你當前的關鍵幀。你可以做，而不是下面的，但這是一個延遲每次

@-webkit-keyframes test { 
    0%  { opacity: 0; } 
    16.66% { opacity: 1; } 
    33.33% { opacity: 0; } 
    100% { opacity: 0; } 
} 
.test { 
    -webkit-animation:test 15s linear infinite forwards; 
}

Demo here

唯一的其他方式，如前面提到的，是使用JavaScript來重置CSS的唯一非JavaScript修復動畫。 Helpful article on that here

來源

2013-09-27 19:47:08

帶有暫停期的循環CSS3動畫？

回答

相關問題