如何暂停和恢复此动画，并可以使用纯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完成？

回答

相关问题