css3 animate 經常使用動畫

本身先總結一下 css3 animate 動畫的基本屬性

css3 animate是一個複合屬性 它包含6個基本屬性

一、animation-name

animation-name指定了動畫的名稱

二、animation-duration

animation-duration 規定了動畫的持續時間(指定一個動畫規定的時長)，以秒(s)或者毫秒(ms)計,默認值是0s,表示無動畫

animation-duration瀏覽器兼容：

三、animation-timing-function

規定了動畫的速度曲線(該屬性是使用三次貝塞爾函數的數字函數，用來生成速度曲線，你能夠在該函數中使用本身的值，也能夠使用預約義的值)

a、linear 線性的，速度重頭到尾速度相同 b、ease 動畫以低速開始，而後加速，在結束前變慢 c、ease-in 動畫先慢後快 d、ease-out 動畫先快後慢 e、ease-in-out 動畫和ease是同樣的，先慢後快，而後再慢，ease要快的突出一些，ease-in-out 快的不是那麼突出 f、cubic-bezier(n,n,n,n) n的值多是0-1中的任何值

我在作時鐘動畫效果還有圓環倒計時效果的時候用到了steps(a，b)函數，steps函數指定了一個階躍函數，第一個參數指定了時間函數的間隔數量（必須是正整數）；第二個參數可選，接受start和end兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲end，一般我用的是step-start

四、animation-delay

該屬性定義了動畫開始以前的延遲，默認值爲0，容許爲負值，eg：-3s，表示跳過3秒立刻進入動畫

五、animation-iteration-count

該屬性規定動畫播放次數，值爲n 或者infinite，infinite：循環播放

六、animation-direction

規定是否輪流反向播放動畫，默認值是normal，正常播放動畫，也能夠是alternate：輪流反向播放

css3動畫到這裏就聊完了,css3除了動畫，還有transform(變換)和transition(過渡)屬性，搭配使用，能夠作出不少動畫效果 固然，css3動畫是有bug的，不少前端技術開發人員如今追求奇異的代碼風格，代碼可讀性下降，這對新人來講是不友好的。 css3動畫bug

css3 Transition動畫執行時有可能會出現閃爍的bug，通常出如今開始的時候或結束的時候。

解決方法以下： 
-webkit-backface-visibility: hidden; 
-webkit-transform-style: preserve-3d;

須要應用在動畫元素上便可 
估計是Chrome在初始渲染CSS動畫時產生的Bug
複製代碼

css動畫卡頓方法

 爲動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個屬性都會開啓GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU，其實說白了這是一個小伎倆，也能夠算是一個Hack，-webkit-transform:transition3d和-webkit-transform:translateZ實際上是爲了渲染3D樣式，但咱們設置值爲0後，並無真正使用3D效果，但瀏覽器卻所以開啓了GPU硬件加速模式。    

本文章後面會持續更新