通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。
css3動畫的實現需要用到animation屬性並配合關鍵幀 @keyframes{}使用。
1.對需要設定動畫的元素新增animation屬性。
2.設定關鍵幀@keyframes{}。
animation是所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性，常用的寫法：animation:關鍵幀的名稱 動畫運動的時間 動畫執行的型別 動畫延遲的時間;
以下是animation包含的常用屬性：
給需要設定動畫的元素新增動畫名稱，名稱可以呼叫對應的關鍵幀。
例如：animation-name:movie; @keyframesmovie{};
設定元素的動畫的名稱為movie,該元素執行@keyframes設定的動畫效果
設定動畫持續的時間，預設為0，可以設定秒或毫秒。
例如：animation-duration: 1s;
動畫時間持續1s
設定動畫運動的型別，預設值為ease:動畫以低速開始，然後加快，在結束前變慢。
其他屬性：
linear:勻速；
ease-in：動畫以低速開始；
ease-out： 動畫以低速結束；
ease-in-out：動畫以低速開始和結束。
cubic-bezier(n,n,n,n)：貝塞爾曲線，可能的值是從 0 到 1 的數值；
例如：animation-timing-function：linear;
動畫運動型別為勻速運動。
設定動畫的延遲，預設是0，可以設定秒或毫秒。
例如：animation-delay:1s;
元素延遲1s後出現動畫效果。
設定動畫的運動次數，預設值為1，動畫運動次數為1次。
其他屬性：
infinite:無限迴圈
例如：animation-iteration-count:3;
動畫效果執行三次。
設定動畫運動的方向，預設值為normal。
其他屬性：
reverse:反方向執行（讓關鍵幀從後往前執行）；
alternate:動畫先正常執行再反方向執行；
alternate-reverse：動畫先反方向執行再正向執行，並持續交替；
控制動畫的執行或暫停，預設值為running：執行;
其他屬性：
paused:暫停；
例：p:hover
滑鼠滑過p時動畫暫停。
格式：
1：@keyframes 動畫的名稱
2：@keyframes 動畫的名稱
50%（中間再可以新增關鍵幀）
這裡我們常用第二種，因為第二種相對更加靈活。
css3在不同瀏覽器中可能會出現不支援，效果無法實現的情況，這時我們一般加上對應的瀏覽器字首:
ie: @-ms-keyframes
opear: @-o-keyframes
firefox: @-moz-keyframes
safari和chrome: @-webkit-keyframes
css3高階動畫基礎
animation 動畫鋪墊 animation 動畫 columns 多列布局 transform 可以實現元素的形狀 角度 位置等的變化。值 rotate 以x y z為軸進行旋轉，預設為z rotatex rotatey rotatez rotate3d x,y,z,angle x,y,z s...
CSS3動畫 keyframes基礎
動畫的本質是快速切換大量時在人腦中形成的具有連續性的畫面，我們將形成連續性畫面的任意一張稱為楨或動畫幀，它是構成動畫的最小單元，css 中專門提供了建立動畫幀的屬性，並以此為基礎在網頁中建立動畫。keyframes是 css 中提供的專門用於定義動畫關鍵幀的語法詞 關鍵幀序列 keyframes m...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...