CSS关键帧手机振动

Question

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

我更新了您的代码，使其暂停大约 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);
  }
}

Answer 2

应用了两项更改：
- 动画持续时间设置为 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 3

这是一个非常好的振动关键帧

    @keyframes vibrate-crazy {
      0% {
        transform: translate(0);
      }
      10% {
        transform: translate(-2px, -2px);
      }
      20% {
        transform: translate(2px, -2px);
      }
      30% {
        transform: translate(-2px, 2px);
      }
      40% {
        transform: translate(2px, 2px);
      }
      50% {
        transform: translate(-2px, -2px);
      }
      60% {
        transform: translate(2px, -2px);
      }
      70% {
        transform: translate(-2px, 2px);
      }
      80% {
        transform: translate(-2px, -2px);
      }
      90% {
        transform: translate(2px, -2px);
      }
      100% {
        transform: translate(0);
      }
    }
    ```