CSS3 transition動畫、transform變換、animation動畫
一、CSS3 transition動畫
transition可以實現動態效果，實際上是一定時間之內，一組css屬性變換到另一組屬性的動畫展示過程。
屬性引數：
1、transition-property 設定過渡的屬性，比如：width height background-color
2、transition-duration 設定過渡的時間，比如：1s 500ms
3、transition-timing-function 設定過渡的運動方式
- linear 勻速
- ease 開始和結束慢速
- ease-in 開始是慢速
- ease-out 結束時慢速
- ease-in-out 開始和結束時慢速
- cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲線設定網站：https://matthewlein.com/ceaser/
4、transition-delay 設定動畫的延遲
5、transition: property duration timing-function delay 同時設定四個屬性
舉例：
<style type="text/css"> .box{ width:100px; height:100px; background-color:gold; transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms; } .box:hover{ width:300px; height:300px; background-color:red; } </style> ...... <div class="box"></div>
二、CSS3 transform變換
css3引入了一些可以對網頁元素進行變換的屬性，比如旋轉，縮放，移動，或者沿著水平或者垂直方向扭曲（斜切變換）等等。這些的基礎都是transform屬性，transform屬性有一項奇怪的特性，就是它們對於其周圍的元素不會產生影響。換句話說，如果將一個元素旋轉45度，它實際上是重疊在元素的上方，下方或者旁邊。而不會移動其周圍的內容。
屬性引數：
1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設定三維移動
8、rotateX、rotateY、rotateZ 設定三維旋轉
9、scaleX、scaleY、scaleZ 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見
舉例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字說明</div>
</div>
</body>
</html>
三、CSS3 animation動畫
transition只能從一組css屬性變成另一組css屬性。animation則可以在多組屬性之間變換。transition必須使用觸發器觸發，animation可以使用觸發器，也可以在頁面載入完成的時候自動觸發。
屬性引數：
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>走路動畫</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s 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>
動畫中使用的圖片如下：
