本文介紹了css3動畫效果抖動解決方法，分享給大家，具體如下：

 div{
      height: 20%;
   }
  @keyframes shanghua{
    from{
      height: 0%;
    }
    to{
      height: 60%;
    }
  }
  div:hover{
    animation: shanghua 1s linear forwards;
  }

從div上部或側(cè)邊滑過時div時會出現(xiàn)抖動現(xiàn)象，并且動畫不能正常顯示高度變?yōu)?0%，原因是從上部或側(cè)部滑過的同時動畫效果生效，height變?yōu)?%，而此時鼠標(biāo)就處于div外部的狀態(tài)，hover不能生效，因此完整動畫不能正常顯示，使div出現(xiàn)抖動效果height一直在20%到0%之間抖動。解決辦法將@keyframes的from中的height屬性設(shè)置為20%即可解決

另一種方法：CSS Shake是一個使用CSS3實現(xiàn)的動畫樣式，使用SASS編寫，利用它我們可以實現(xiàn)多種不同樣式的抖動效果（如下面的GIF圖像）。這是一個很微小的動畫，但使用得當(dāng)也是挺不錯的，比如用在廣告、圖像、按鈕上，這樣可以用來吸引用戶眼球從而促使去點擊它。

這個Csshake有9個抖動樣式，三個狀態(tài)，如鼠標(biāo)經(jīng)過拉動、無限抖動、鼠標(biāo)懸停拉動，下面一起來看看介紹：

使用教程

首先引入css shake的樣式表文件。

<link type="text/css" href="csshake.css">

給你的DOM元素添加shake class樣式

<div class="shake"></div>

添加抖動樣式，一共9種，也可以看DEMO對應(yīng)添加即可

<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>

另外我還能通過 .freeze, .shake-constant & .hover-stop 來控制狀態(tài)，具體自己試下哦！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論