html - 如何使用 animate.css shake with less shakes

Question

我正在使用 animate.css 实现 CSS3 摇动效果，CSS 看起来像下面的代码片段。现在它来回摇晃了好几次，我想把摇晃减半。有没有办法用 animate css3 来做到这一点，或者我需要修改下面的 css3 吗？如果可以，最好的方法是什么？

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

Answer 1

不太确定您想如何“将摇晃减半”。你的意思是速度，摇摆？？

这是我想出来的，demo

如果你想放慢动画速度，改变`-webkit-animation-duration:

这是一个自定义的炫酷摇晃/摆动效果:

@keyframes shake {
0% {
  -webkit-transform:translate(2px,1px) rotate(0deg)
}

10% {
  -webkit-transform:translate(-1px,-2px) rotate(-1deg)
}

20% {
  -webkit-transform:translate(-3px,0px) rotate(1deg)
}

30% {
  -webkit-transform:translate(0px,2px) rotate(0deg)
}

40% {
  -webkit-transform:translate(1px,-1px) rotate(1deg)
}

50% {
  -webkit-transform:translate(-1px,2px) rotate(-1deg)
}

60% {
  -webkit-transform:translate(-3px,1px) rotate(0deg)
}

70% {
  -webkit-transform:translate(2px,1px) rotate(-1deg)
}

80% {
  -webkit-transform:translate(-1px,-1px) rotate(1deg)
}

90% {
  -webkit-transform:translate(2px,2px) rotate(0deg)
}

100% {
  -webkit-transform:translate(1px,-2px) rotate(-1deg)
}
}

这是一个简单的 demo