CSS3 animation 動畫

admin發表於2019-02-04

CSS3之前,製作動畫效果沒有太好的捷徑,基本要藉助JavaScript。

不但程式碼量較大,效能也不夠優良,CSS3的出現使得製作動畫效果更為簡單且效能更好。

當前,animation與transition屬性可以實現動畫效果,更為準確的說,transition屬性實現的是"過渡"。

兩個屬性的命名與其功能可以說恰如其分,關於兩者的區別可以參閱animation與transition 區別一章節。

下面將通過程式碼例項詳細介紹一下animation屬性的用法,本文包含如下幾方面內容:

(1).animation基礎語法。

(2).CSS動畫的實質。

(3).animation與@keyframes動畫演示分析。

(4).animation動畫的注意點。

一.animation基礎語法:

語法結構:

[CSS] 純文字檢視 複製程式碼
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

引數解析:

(1).animation-name:規定動畫的名稱,利用它可以與@keyframes關聯起來。

(2).animation-duration:規定動畫的時長,時間是秒,比如5s。

(3).animation-timing-function:規定動畫的過渡型別,可以使用內建固定的關鍵字,也可以自定義資料。

(4).animation-delay:規定動畫開始前的延遲時間。

(5).animation-iteration-count:規定動畫的重複次數。

(6).animation-direction:規定動畫迴圈中是否會反向運動。

(7).animation-fill-mode:規定物件動畫時間之外的狀態。

(8).animation-play-state:規定動畫是否正在執行或暫停。

有很多屬性值從字面上不容易理解,不用擔心,後面會有程式碼演示和對應屬性的相關文章。

如果animation提供了多組屬性值,那麼組與組之間使用逗號分隔。

animation與border等屬性一樣,都是複合屬性,可以使用複合寫法,也可以將屬性單獨列出。

二.CSS動畫的實質:

不要將動畫效果想象的太神奇,之所以能夠在視覺上呈現視覺效果,無非是元素屬性值的持續變化。

比如元素的width屬性,在10秒內,由10px持續變化到100px。

三.動畫演示:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:theanimation 5s infinite alternate;
}
@keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

程式碼分析如下:

(1).theanimation是動畫名稱。

(2).5s是完成一次動畫持續的時間。

(3).infinite規定動畫可以無限次重複。

(4).alternate規定動畫:正常方向與反方向交替運動。

(5).@keyframes這是一個非常重要的屬性,它後面跟隨者與之關聯的動畫名稱,它可以對整個動畫過程的細節進行控制,比如一個時間段內設定背景顏色,另一個時間段設定元素尺寸等。

(6).上述程式碼將元素的left屬性值在5秒內從0設定為200px,在視覺上產生動畫效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:theanimation 4s infinite alternate;
}
@keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼稍微複雜一些,使用@keyframes屬性對動畫過程進行了更為精細的控制。

關於@keyframes屬性的更多內容參閱CSS3 @keyframes一章節。

前文已經提到,animation是一個複合屬性,包含眾多子屬性,考慮到文章的篇幅問題,本文不做過多介紹。

關於子屬性更多內容可以參閱如下幾篇相關文章:

(1).animation-name參閱CSS3 animation-name一章節。

(2).animation-duration參閱CSS3 animation-duration一章節。

(3).animation-timing-function參閱CSS3 animation-timing-function一章節。

(4).animation-delay參閱CSS3 animation-delay一章節。

(5).animation-iteration-count參閱CSS3 animation-iteration-count一章節。

(6).animation-direction參閱CSS3 animation-direction一章節。。

(7).animation-play-state參閱CSS3 animation-play-state一章節。

(8).animation-fill-mode參閱CSS3 animation-fill-mode一章節。

四.animation動畫的注意點:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width: 200px;
  height: 100px;
  background-color: blue;
  animation: theanimation 5s;
}
@keyframes theanimation{
  from {background-color: green;}
  to {background-color: blue;}
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

可以看到animation屬性設定後,不需要其他觸發條件,會自動生效。

有朋友可能會有這樣的疑問,div:hover {animation: theanimation 5s;}不就是設定觸發條件嗎,看起來好像是,但只是當滑鼠懸浮div的時候為div新增動animation動畫,這一點與transition動畫不同,兩者區別這裡不做介紹,可以參閱文章開頭推薦的文章。

相關文章