CSS关键帧手机振动

我正在尝试使手机振动效果。这是我目前有：https://codepen.io/anon/pen/jwWwzx CSS关键帧手机振动

我只是想弄清楚如何添加一个休息，就像振动一秒钟，然后暂停一秒钟，然后重复。施加

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

来源

2017-06-09 nSmed

我改变了你的榜样，因此暂停了一段时间，在每一个动画循环的末尾：HTTPS ：//codepen.io/anon/pen/yXeXwG –

我更新了你的代码，以便它暂停约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); 
    } 
}

来源

2017-06-09 10:50:49

两个更改：
- 动画集合的持续时间为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>

来源

2017-06-09 10:45:09 Gerard

CSS关键帧手机振动

回答

相关问题