如何使用 animate.css 震动少答案

【问题标题】：How to use animate.css shake with less shakes如何使用 animate.css 震动少
【发布时间】：2014-12-04 19:05:33
【问题描述】：

我使用 animate.css 来实现 CSS3 抖动效果，CSS 看起来像下面的 sn-p。现在它来回摇晃多次，我想把摇晃减半。有没有办法用动画 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;
}

【问题讨论】：

标签： html css animation animate.css

【解决方案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

【讨论】：

当前震动来回大约 5 次，我想将其减少到 3... 可能吗？