如何快速上手基礎的CSS3動畫

前言

提及CSS3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動做，好比旋轉、傾斜、位移等，translate是transform裏面的屬性，用於2D/3D位移。後2個主要對動做進行描述，動畫時間、速度曲線、次數等。

下面我用是一些簡單的示例，讓你們快速的入門上手:

快速開始第一個動畫

這裏hover事件時改變寬度和背景顏色，用transition來描述動畫，因爲咱們只對width進行了描述，因此背景色，鼠標指上去，會立馬變色，並不會有漸變的過程。

這裏爲何用transition而不用animation？那就要說說他們直接的區別了。

transition須要觸發一個事件， 而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，很是簡單很是容易用。能夠說它是animation的簡化版本，是給普通作簡單網頁特效用的。

如今明白了吧，由於咱們用的hover事件，因此要用transition。

下面請看第二個例子

 

 

這裏動畫從加載就開始執行，因此用了animation，改變寬度和背景色，用時1s，而且無限次循環執行。@keyframes規則是建立動畫。
-webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用於兼容不一樣瀏覽器。

快速開始第三個動畫

transform：rotate使其div元素2D旋轉20°.固然你能夠設置transform：rotateY, Y 軸的 3D 旋轉。

你還能夠設置transform: translate，進行2D，3D位移；

transform: scale，進行2D，3D縮放；

transform: skew，進行2D傾斜等等。

總結

好的動畫效果，第一要素是：好的想法，有創意，纔有好的成品；第二要素是：有好的實現解題思路，當有設計後，製做就須要想辦法實現效果，剝繭抽絲，一步一步來；第三要素：不畏懼的心，勇敢嘗試，多實踐，多動手，靈感每每來與你寫的過程當中。

有了上面的小示例，相信小夥伴們也能本身寫寫簡單的CSS3動畫了，若是有疑問，能夠評論留言，你們一塊兒學習探討。

一我的學習會有迷茫，動力不足。這裏推薦一下個人前端學習交流qun：四八四，七五七，七六零，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。