我如何暂停和恢复这个动画，它可以用纯CSS完成吗

How can I pause and resume this animation and can it be done with pure CSS?

本文关键字：CSS 动画 何暂停 暂停 恢复      更新时间：2023-09-26

https://jsfiddle.net/w776Lq1u/

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解决方案是什么？

谢谢。

您只需要加快动画速度，添加一个无动画帧并将动画设置为无限。

如下：

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);
      }
    }

以下是您的需求尝试。

我已经将关键帧百分比减少到一半，在剩下的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);
  }
}

是的，这可以在CSS中完成。对于延迟，请延长持续时间，将translate3d(0,0,0)包括在末尾，并调整关键帧百分比，使未平移的位置成为动画本身的一部分。然后使用animation-iteration-count: infinite;，使整个过程重复。

相关文章：