之前我基本都沒用過動畫，一般都用canvas做一些畫圖之類的。在前幾次的vilin開發中，有過幾個動畫效果的需求，於是我學習了一下css的動畫，這裡簡單記錄一下。
css動畫的特點就是簡單，通過 css3建立的動畫可以取代動畫、flash以及 js等。
動畫顧名思義可以動的圖畫，而這個「動」指的就是我們常見的影象變換：平移、旋轉、放大、縮小，另外還包括顏色的變化：顏色加深變淺等。css裡主要通過animation來實現元素的動畫。
影象變換
用style裡的transform屬性來實現影象變換，然後通過animation屬性來使元素動起來。
（1）translatex(x)：沿x軸平移；（2）translatey(y)： 沿y軸平移；
乙個引數時：表示水平和垂直同時縮放該倍率兩個引數時：第乙個引數指定水平方向的縮放倍率，第二個引數指定垂直方向的縮放倍率。
（1）skewx(x)：使元素在水平方向傾斜（x軸傾斜）；顏色變化（2）skewy(y)：使元素在垂直方向傾斜（y軸傾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同時傾斜（x軸和y軸同時傾斜）；
直接通過color（或者background等）和opacity屬性就可以控制顏色變化了。
用transition直接實現動畫
以下**使class為ani-test的元素在hover時向右平移500px，向下平移300px，縮小為原來的0.3，並旋轉45度，同時背景變為綠色。關於transition的具體使用可以看看這兒：
.ani-test
.ani-test:hover
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。keyframe顧名思義關鍵幀，就是註明關鍵幀的資訊，例如下例中的0%、25%就是指動畫執行到0%、25%時元素的部分style屬性。將下例實驗一下就很容易理解了，我就不再贅述了。
@keyframes myfirst25%
50%75%
100%
}@-moz-keyframes myfirst /* firefox */25%
50%75%
100%
}@-webkit-keyframes myfirst /* safari 和 chrome */25%
50%75%
100%
}@-o-keyframes myfirst /* opera */25%
50%75%
100%
}div
雲視訊官網 首頁通知。在這個需求裡我用css加js完成了動畫效果，最後用scalajs去間接使用movenotice這個函式。
css部分**：to}
to}to}
to}to}
to}js部分**：
function
movnotice
(flag)
,500);
}else
}}
參考：
CSS動畫學習
size large b 1.參考鏈結 b size url size large b 2.動畫內容 b size css3動畫的屬性主要分為三類 transform transition以及animation。因為css3還沒有正式發布，所以各種瀏覽器對它的支援也不盡相同。所以在設定css3屬性 ...
css簡單動畫（transition屬性）
使用box shadow畫赤橙黃綠藍靛紫7個弧形，拼接在一起 after偽元素寫投影樣式 彩虹和投影都有動畫 dom結構 用兩個巢狀的div容器，父容器來控制圖示顯示的位置，子容器用來寫彩虹的樣式。css樣式 1 定義父容器樣式，控制圖示位置，順便給整個頁面加個背景色，方便預覽 複製 body co...
CSS3簡單動畫
css3的動畫確實非常絢麗！瀏覽器相容性很重要！分享兩個小動畫 doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta n...