CSS摆动/摇晃效果[关闭]

Question

我打算做的效果： - 摆动几次，然后停止摆动。定期执行此行为，直到鼠标悬停。 -悬停时，摆动运动完全停止。 -所有过渡都顺利进行。 我尝试使用 -webkit-animation 关键帧，但使用 -webkit-animation-timing-function 来缓解鼠标悬停时的过渡不起作用。 另外，我不知道如何实现以下周期运动：摆动、停止和再次摆动。 如果您能指出正确的方向，我将不胜感激。

Answer 1

尝试以下方法之一：

.class:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  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);
  }
}

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

或 将此添加到您的脚本中：<link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

并为你要摇动的元素添加一个类

完整文档在这里：https://elrumordelaluz.github.io/csshake/

Answer 2

这是一个简单的摆动动画，当您将鼠标悬停在它上面时会停止。

为了实现摆动之间的延迟，您可以只包含动画的“空块”......也就是说，在此期间没有任何变化。在我的示例中，0% 和 80% 标记之间没有任何变化，并且“摆动”仅发生在最后 20%（最终出现半秒）。

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

h1.wiggle {
  display: inline-block;
  animation: wiggle 2.5s infinite;
}

h1.wiggle:hover {
  animation: none;
}

<h1 class="wiggle">
  wiggle, wiggle
</h1>

不幸的是，如果您将鼠标悬停在动画中间，这并不能说明“缓动”回到未摆动状态。这样做可能需要一点 JavaScript。