CSS 关键帧 phone 振动

Question

我正在尝试制作类似 phone 振动的效果。这是我目前拥有的：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);
}
}

Answer 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);
  }

}

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

Answer 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);
  }
}

CSS 关键帧 phone 振动

CSS Keyframe phone vibrate

css

keyframe

css-animations