如何暂停和继续播放该动画，并且可以使用纯CSS完成动画？

Question

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

---

I need this animation to play once, pause for a few seconds, play again, and repeat this infinitely.

Can this be done using pure CSS?

If not, what's the simplest JS/JQuery solution?

Thanks.

Answer 1

You just have to speed up animation, add a no animation frame and set animation as infinite.

As here :

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

Here is an attempt for your requirement.

I have reduced the keyframe percentages to a half and for the remaining 50% time the block is in stationary position. The animation time has also been name double to the previous value to compensate for the keyframe changes

You can adjust the delay by following the same concept to a third or quarter or more.

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

Yes this can be done in CSS. For the delay extend the duration, include translate3d(0,0,0) towards the end and adjust your keyframe percentages so that the non-translated position is part of the animation itself. Then use animation-iteration-count: infinite; so the whole thing repeats.