【原創】CSS3動畫總結對比 / 帶思惟導圖 / 啓發小案例

一，區分3個屬性究竟是什麼意思？

先把css3的3個屬性（transition，transform，animation）搞清楚是什麼意思？下面截圖是百度翻譯的中英文對比：

二，思惟導圖擬清關係

 而後再來個思惟導圖，把css3的動畫擬下，見下圖： 

原圖連接見這裏：https://static.oschina.net/uploads/space/2017/0911/200035_dHEA_583531.jpg

經過上圖，其實能夠把css3的動畫分爲2大類型：① 轉換動畫；② 關鍵幀動畫（是否是有點以前flash的感受？好吧，暴露年紀了。）；

 關於 轉換動畫和 關鍵幀動畫，怎麼區分？分別適用什麼場景？ 

動畫（較爲簡單）	關鍵幀動畫（符合複雜的動畫）
根據過渡時間完成，A---B的動畫	根據過渡時間完成：A---B----C---更多
字母分別表明不一樣的動畫形態節點，關鍵幀動畫還能在此節點上定義節點間的時間間隔。從而達到更復雜的效果 它們的共同的過渡（緩衝）方式： ease linear ease-in ease-out ease-in-out 固然，除以上的動畫過渡方式外，還有動態貝塞爾曲線。  transition: all 1000ms cubic-bezier(0.170, 0.960, 0.725, -0.355); }  見個人另外一篇文章 ↓： http://www.javashuo.com/article/p-sivifnqs-n.html  點開第二塊，關於貝塞爾曲線的詳細講解。

 

 

 

三，【轉換動畫】transform動畫及小demo

一個完整的transform的css3動畫實現完成，須要指定2個。① 過渡：transition；② 類型：transform

OK，開始第一個demo。

transform：rotate 旋轉角度

.box{ transition: all 0.5s;/*...box的其餘屬性省略，如下均同*/}
.box:hover{ transform: rotate(360deg);}

 

transform：scale 縮放比例

.box{ transition: all 0.5s;}
.box:hover{ transform: scale(2);}/*小於1 縮小*/

 

transform：translate 偏移位置

.box{ transition: all 0.5s;}
.box:hover{ transform: translate(50px,50px);}/*X,Y值*/

  

transform：skew 傾斜角度 

.box{ transition: all 0.5s; }
.box:hover{ transform: skew(30deg);}

 

那麼問題來了，針對多種特效一塊兒hover，該如何弄？

.box{ transition: all 0.5s;}
.box:hover{ transform: scale(0.2) rotate(360deg) skew(20deg) translate(30px);}

如上面css所示，在transform屬性後，跟 scale() rotate() skew() translate()；它們之間用空格。

------------------------------------對以上所講的案例以下----------------------------------

  案例  transform：rotate 旋轉角度

#menu-12  ul li{ 
	float:left; 
	margin: 15px; 
	width: 30px; 
	height: 30px; 
	line-height: 30px; 
	text-align: center; 
	border-radius: 15px; 
	background: linear-gradient(green, blue);/*爲了方便觀察，這裏作了背景漸變*/
	color: #fff; 
	transition: all 0.3s;/*過渡*/
}
#menu-12  ul li:hover{ 
	transform: rotate(360deg);/*旋轉*/
}

 

  案例  transform：scale 縮放比例

#menu-02{ margin:30px auto 50px auto;  width:480px; height:50px;}
#menu-02 ul li{ 
	float:left; 
	width:120px; 
	height:50px; 
	background:#4a7f6d; 
	line-height:50px; 
	text-align:center; 
	transition: all 0.3s; /*過渡*/
}
#menu-02 ul li:hover{
	background:#4a7f6d;
	color:#fff;
	/*放大*/
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
}

 

 

 

------------------------------------------好啦，我是分割線------------------------------------------------

下面開始作點小demo吧。

 

===============================================================

小案例01：利用translate作按鈕點擊下沉

.box{ transition: all 0.3s; width: 70px; height: 30px; text-align: center; line-height: 30px;  color: #fff; background: #003BB3; cursor: pointer; }
.box:active{ transform: translate(2px,2px);}

 技巧：在僞類active-上作偏移 。

 

 題外話：用jquery能夠作按鈕下沉嗎？

jquery 利用offset 作按鈕偏移，傳送門戳這裏：http://www.javashuo.com/article/p-uixguiia-bo.html

===============================================================

 

 

===============================================================

小案例02：利用transition錦上添花；

 技巧：把背景切換圖先作好，而後給個transition時間和緩衝方式就OK了。

===============================================================

 

===============================================================

小案例03：利用 transform中的 scale 和 translate 共同做用；

 技巧：transform後跟的屬性和值後不要敲分號，是空格。

.box:hover{ transform: scale(0.2) rotate(360deg) skew(20deg) translate(30px);}

 

===============================================================

 

四，【關鍵幀動畫】-以及小demo

直接來小案例吧；圖以下（gif圖的緣由，感受好像很卡，實際在瀏覽器運行很流暢。）

1. 基本的樣式先定義好；
2. hover上使用 animation
3. 而後在下面定義好 keyframes

.box{ float: left; margin-right: 20px;  padding-top: 7px; width: 50px; height: 43px; border-radius:25px ; background: orange; text-align: center; cursor: pointer;}
.box:hover{ animation:chai 0.5s ease-in-out;} /*這裏的animation 調用下面的 keyframes的名稱:chai*/

@-webkit-keyframes chai /*這裏的chai被上面的animation調用*/
{
	0% { transform: scale(0.8);}
	25% { transform: scale(1.2);}
	50% {transform: scale(0.8);}
	75% {transform: scale(1.2);}
	100% {transform: scale(1);}
}

學習關鍵幀動畫，最佳的方案就是直接去看 animate.css的源碼 https://daneden.github.io/animate.css/

 

如何作一個不斷運動循環的動畫？

見效果圖以下：

css

@-webkit-keyframes chai /*這裏的chai被上面的animation調用*/
{
						0% { transform: scale(0.8);}
						25% { transform: scale(1.2);}
						50% {transform: scale(0.8);}
						75% {transform: scale(1.2);}
						100% {transform: scale(1);}
}
#Brand-vision > i{
						color: greenyellow;
						animation:chai 0.6s ease-in-out infinite; /*注意這裏infinite即爲循環*/
}

html

<div id="Brand-vision">
					<i class="fa fa-circle" aria-hidden="true"></i> 品牌網絡助力！
				</div>

 

 

五，css3動畫和jquery的結合

因爲css3的事件比較弱，因此選擇css3的動畫大可能是僞類hover來操做；所以，實際工做中，一般是css3流暢的動畫+jquery強大的選擇器和事件來結合作動畫。

它們是如何結合的？

【原創】css3+jquery 實現橫線跟隨菜單-含詳細優化過程和思考

請戳這裏：http://www.javashuo.com/article/p-vscsnkwe-ck.html

 

六，未完待續的總結

以上動畫，都出觸發事件類的動畫，他們有一個特色，就是利用css的僞類hover，或者結合js的鼠標事件來觸發，而後追加動畫的樣式。

 

思考：如何作動畫小短片？

接下來會講利用js的settimeout來作讓dom隊列出來的動畫，這個就能夠作動畫小短片了。若是能夠，你能夠將某一個塊狀作成相似flash的影片剪輯。好比，天空有一個一直在閃爍的星星，其餘人物或者主題物按照順序一個個出場...強大的css3+jquery，能夠實現你所想！

setTimeout(function(){
      $('.yourdiv').addClass('xxx');
}, 5000);


setInterval(function(){ 
    $('.yourdiv').toggleClass('xxx');
}, 3000 );