CSS Keyframe 手机震动答案

【问题标题】：CSS Keyframe phone vibrateCSS Keyframe 手机震动
【发布时间】：2017-06-09 18:50:49
【问题描述】：

我正在尝试制作类似于手机振动的效果。这是我目前拥有的：https://codepen.io/anon/pen/jwWwzx

我只是想弄清楚如何添加休息时间，比如振动一秒钟然后暂停一秒钟然后重复。

<div class="phone"><img src="https://i.imgpile.com/nucPMx.png"></div>


.phone {
  -webkit-animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}

@keyframes vibrate {
  0.50%, 90% {
   -webkit-transform: translate3d(-0.5px, 0, 0);
   transform: translate3d(-0.5px, 0, 0);
 }

0.50%, 80% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}

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

0.50%, 60% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}
}

【问题讨论】：

我更改了您的示例，使其在每个动画循环结束时暂停一段时间：codepen.io/anon/pen/yXeXwG

标签： css css-animations keyframe

【解决方案1】：

应用了两项更改：
- 动画的持续时间设置为 2 秒
- 运动在 50% 的关键帧处停止

这样，模拟了 1 秒的暂停。

.phone {
  -webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}

@keyframes vibrate {
  0.50%, 10%, 20%, 30%, 40%, 50%
  {
    -webkit-transform: translate3d(0.5px, 0, 0);
    transform: translate3d(0.5px, 0, 0);
  }
  5%, 15%, 25%, 35%, 45% 
  {
    -webkit-transform: translate3d(-0.5px, 0, 0);
    transform: translate3d(-0.5px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0.5px, 0, 0);
    transform: translate3d(0.5px, 0, 0);
  }

}

&lt;div class="phone"&gt;&lt;img src="https://i.imgpile.com/nucPMx.png"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我更新了您的代码，使其暂停了大约 20% 的动画。这样，您就可以同时保留结尾的暂停和快速振动效果 (DEMO)：

.phone {
  -webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}


@keyframes vibrate {
  0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }
  1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
    -webkit-transform: translate3d(1px, 0, 0);
            transform: translate3d(1px, 0, 0);
  }
  20%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

【讨论】：