如何暫停和恢復此動畫，並可以使用純CSS完成？

https://jsfiddle.net/w776Lq1u/如何暫停和恢復此動畫，並可以使用純CSS完成？

HTML

<div class="shake"> 
</div>

CSS

div { 
    width: 80px; 
    height: 80px; 
    background-color: gold; 

} 

.shake { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) running; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
}

我需要這個動畫播放一次，停頓了幾秒鐘，再次發揮，並無限地重複這一點。

這可以使用純CSS完成？

如果不是，最簡單的JS/JQuery解決方案是什麼？

謝謝。

來源

2016-04-29 Zakalwe

這可能純粹在CSS來實現。檢查css3動畫。 –

您可以使用關鍵幀「拉伸」動畫 – lipp

@lipp這就是我將採用的路線，如果沒有其他解決方案。 – Zakalwe

您只需加快動畫速度，添加一個無動畫幀並將動畫設置爲無限。

如這裏：

https://jsfiddle.net/w776Lq1u/5/

.shake { 
     animation: shake 1s cubic-bezier(.36,.07,.19,.97) running infinite; 
     transform: translate3d(0, 0, 0); 
     backface-visibility: hidden; 
     perspective: 1000px; 
    } 

    @keyframes shake { 


     0%, 100% { 
     transform: translate3d(0, 0, 0); 
     } 

     30%, 70% { 
     transform: translate3d(-1px, 0, 0); 
     } 

     35%, 65% { 
     transform: translate3d(2px, 0, 0); 
     } 

     40%, 50%, 60% { 
     transform: translate3d(-4px, 0, 0); 
     } 

     45%,55% { 
     transform: translate3d(4px, 0, 0); 
     } 
    }

來源

2016-04-29 14:07:51

爲了清楚起見，我想在震動之間暫停2-3秒。除非我錯過了一些東西，否則你的代碼似乎和我的一樣。 – Zakalwe

這是正確的答案，動畫需要更長的時間（比如4秒），並調整百分比。 –

@Paulie_D是的，我做了一個很短的暫停（只有60％的動畫時間）。如果你想要2秒。將您的動畫％年齡範圍更改爲25％ - > 75％，然後設置4秒的動畫時間。 –

是的，這可以用CSS來完成。對於延遲延長的持續時間，包括translate3d(0,0,0)到最後並調整您的關鍵幀百分比，以便非翻譯位置是動畫本身的一部分。然後使用animation-iteration-count: infinite;這樣整個事情重複。

來源

2016-04-29 14:09:26 Chao

這是您的要求的嘗試。

我已經將關鍵幀百分比減少到一半，並且剩餘的50％時間塊處於靜止位置。動畫時間也被命名爲前一個值的兩倍，以補償關鍵幀更改

您可以通過將相同的概念遵循三分之一或四分之一或更多來調整延遲。

https://jsfiddle.net/w776Lq1u/4/

div { 
    width: 80px; 
    height: 80px; 
    background-color: gold; 

} 

.shake { 
    animation: shake 1.64s cubic-bezier(.36,.07,.19,.97) infinite; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    5%, 45% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    10%, 40% { 
    transform: translate3d(2px, 0, 0); 
    } 

    15%, 25%, 35% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    20%, 30% { 
    transform: translate3d(4px, 0, 0); 
    } 

    50%{ 
    transform: translate3d(0, 0, 0); 
    } 
}

來源

2016-04-29 14:15:22

這幾乎就是我所做的。謝謝你的幫助。 – Zakalwe

如何暫停和恢復此動畫，並可以使用純CSS完成？

回答

相關問題