CSS摆动/摇动效果

Question

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

Answer 1

这是一个简单的摆动动画,当你将鼠标悬停在动画上时会停止.

为了实现摆动之间的延迟,你可以只包括动画的"空块"......也就是说,没有任何变化的时期.在我的例子中,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.

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/