CSS3 動畫animation屬性

CSS3的animation屬性用法詳解:
animation翻譯成中文具有「動畫」的意思，確實如此，animation屬性就是用來定義元素的動畫效果，當然和使用flash或js製作的動畫相比要粗糙一些，但是能夠滿足我們基本的動畫需求，所以掌握此屬性也是大有必要的。
一.基本知識:
在閱讀下面的文章之前，建議事先參閱CSS3的@keyframes用法詳解一章節。
使用transition屬性可以實現動畫過渡效果，但此屬性有個缺點，那就是從初始值到終止值的過渡過程可控性很差，也就是說不能夠更為細緻的控制動畫效果，而animation屬性則可以結合@keyframes定義的動畫名稱，更為細緻的控制動畫過渡過程。此屬性和border、background等屬性一樣是複合屬性。
關於transition屬性可以參閱CSS3的transition屬性詳解一章節。
語法結構:

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*

參數解析:
1.animation-name:此屬性規定元素所套用的動畫名稱，此名稱是由@keyframes定義的。
2.animation-duration:此屬性用於規定動畫的持續時間。
3.animation-timing-function:用於規定動畫的過渡類型。
4.animation-delay:用來規定動畫的開始執行的延遲時間。
5.animation-iteration-count:用來規定動畫的重複次數。
6.animation-direction:用來規定動畫循環中是否會反向運動。
7.animation-play-state:規定動畫是否正在運作或暫停。
8.animation-fill-mode:規定物件動畫時間之外的狀態。
特別說明:
1.如果提供多組屬性值，以逗號進行分隔。
2.對應的腳本特性為animation。
程式碼實例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
   
  animation:theanimation 5s infinite alternate;
  -webkit-animation:theanimation 5s infinite alternate ;
  -moz-animation:theanimation 5s infinite alternate ;
  -o-animation:theanimation 5s infinite alternate ;
  -ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-webkit-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-moz-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-o-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-ms-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼可以設定div元素的left屬性值從0px到200px進行動畫過渡，並且能夠無限次的重複循環，且能夠進行反向運動。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
   
  animation:theanimation 4s infinite alternate;
  -webkit-animation:theanimation 4s infinite alternate ;
  -moz-animation:theanimation 4s infinite alternate ;
  -o-animation:theanimation 4s infinite alternate ;
  -ms-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;}
}
@-moz-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;}
}
@-webkit-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;}
}
@-o-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>

上面的程式碼就比第一個要複雜一些了，下面介紹一下它的運作過程。
1.整個動畫的總時間設定為4秒。
2.@keyframes定義了動畫的四個階段，0%-25%時間段將left屬性值從0設定為100px，背景色從red轉換為blue，25%-50%、50%-75 %和75%-100%也是同樣的道理。
3.並且能夠實現無限循環和反向運動效果。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="//m.sbmmt.com/" />  
<title>php中文网</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
     
  animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
  -webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
  -moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
  -o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
  -ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-webkit-keyframes firstanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-moz-keyframes firstanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-o-keyframes firstanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-ms-keyframes firstanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@keyframes secondanimation{
  0% {top:0px;}
  100% {top:200px;}
}
@-webkit-keyframes secondanimation{
  0% {top:0px;}
  100% {top:200px;}
}
@-moz-keyframes secondanimation{
  0% {top:0px;}
  100% {top:200px;}
}
@-o-keyframes secondanimation{
  0% {top:0px;}
  100% {top:200px;}
}
@-ms-keyframes secondanimation{
  0% {top:0px;}
  100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼一次為div設定了多組動畫屬性，中間用逗號分隔。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate; -webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate; -moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate; -o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate; -ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate; } @keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-webkit-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-moz-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-o-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-ms-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-webkit-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-moz-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-o-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-ms-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } </style> </head> <body> <div></div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear