CSS3，我們可以創建動畫，它可以取代許多網頁動畫圖像，Flash動畫，和JAVAScripts。
CSS3 @keyframes 規則
要創建CSS3動畫，你將不得不瞭解@keyframes規則。
@keyframes規則是創建動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改爲新的樣式。
CSS3 動畫
當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
- 規定動畫的名稱
- 規定動畫的時長
CSS3動畫是什麼？
動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果。前面CSS3 過渡也可以實現一些動畫效果，但是需要用事情去觸發纔會動起來。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
參數：
1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線
- linear 勻速
- ease 開始和結束慢速
- ease-in 開始是慢速
- ease-out 結束時慢速
- ease-in-out 開始和結束時慢速
- steps 動畫步數
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction
- normal 默認動畫結束不返回
- Alternate 動畫結束後返回
8、animation-play-state 動畫狀態
- paused 停止
- running 運動
9、animation-fill-mode 動畫前後的狀態
- none 不改變默認行爲
- forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
- backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
- both 向前和向後填充模式都被應用
10、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
div{
width: 100px;
height: 100px;
background-color: gray;
margin-top: 20px;
}
div:nth-child(1){
animation: cc1 1s 0s 4;
}
div:nth-child(2){
animation: cc2 4s 1s 1;
}
div:nth-child(3){
position: relative;
border-radius: 50%;
animation: cc3 5s ease 2s infinite;
}
@keyframes cc1{
from{background-color: gray;}
to{background-color: red;}
}
@keyframes cc2{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@keyframes cc3{
0% {background-color: red;left: 0px;top:0px}
25%{background-color: yellow;left:200px;top:0px;}
50% {background: blue;left:200px;top:200px;}
70% {background: green;left: 0px ;top:200px;}
100%{background-color: red;left: 0px;top:0px;}
}
</style>
</head>
<body>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>
人物走路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation 人物走路動畫</title>
<style type="text/css">
.box{
width:120px;
height:182px;
border:1px solid #000;
margin:50px auto 0;
overflow:hidden;
position:relative;
}
.box img{
position:absolute;
left:0;
top:0;
animation:walking 1s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="images/walking.png"></div>
</body>
</html>
風車旋轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation 動畫</title>
<style type="text/css">
.box{
width:400px;
height:400px;
margin:50px auto 0;
background:url(images/fengche.png) no-repeat;
animation:moving 1s linear 0s infinite;
}
@keyframes moving{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
