Question

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

感谢。

Answer 1

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

在这里：

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

Answer 2

以下是您的要求尝试。

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

Answer 3

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

如何暂停和恢复此动画，是否可以使用纯CSS完成？

3 个答案: