Question

我打算做的效果： - 扭动几次，停止摆动。定期执行此操作，直到鼠标悬停。 - 悬停时，摆动动作完全停止。 - 所有过渡都很平稳。我尝试使用-webkit-animation关键帧，但是使用-webkit-animation-timing-function来缓解鼠标悬停时的转换并不起作用。此外，我迷失了如何实现周期运动：摆动，停止和再次摆动。如果你能指出正确的方向，我将不胜感激。

Answer 1

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

为了在摆动之间实现延迟，你可以只包括一个空的块＆＃34;动画的......也就是说，没有任何变化的时期。在我的例子中，0％和80％标记之间没有任何变化，而且＃34; wiggle＆＃34;只发生在最后的20％（最终达到半秒）。

＆＃13;

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

＆＃13;

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

＆＃13;

不幸的是，这并不能解释＆＃34;缓和＆＃34;如果你在动画中期将鼠标悬停在它上面，那就回到没有摆动的状态。这样做可能需要一些JavaScript。

Answer 2

请尝试以下方法之一：

.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/

CSS摆动/摇动效果

2 个答案: