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關鍵幀手機振動

回答

相關問題