我正在尝试使手机震动。这是我目前拥有的: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);
}
}
最佳答案
我更新了您的代码,以使其暂停在动画的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 - CSS关键帧手机震动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44455538/