動畫
動畫（animation） 是css中具有顛覆性的特徵之一，可以通過設置多個節點來精確控制一個， 或一組動畫
常用來實現複雜的動畫效果。
相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。
1. 動畫的基本使用
製作動畫分爲兩步：
- 先定義動畫
- 再使用（調用）動畫
用keyfames定義動畫（類似定義類選擇器）
@keyframes 動畫名稱{
0%{
width:100px;
}
100%{
width:200px;
}
}
動畫基本使用命令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 我們想頁面一打開，一個盒子就從左邊走到右邊 */
/* 1. 定義動畫 */
@keyframes move{
/* 開始狀態 */
0%{
transform: translateX(0px);
}
/* 結束狀態 */
100%{
transform: translateX(1000px);
}
}
div{
width:200px;
height: 200px;
background-color: greenyellow;
/* 2.調用動畫 */
/* 動畫名稱 */
animation-name: move;
/* 持續時間 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
動畫序列
1. 0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。
2. 在@keyframes中規定某項CSS樣式，就能創建由當前未央市住建改爲新樣式的動畫效果。
3. 動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
4. 請用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%。
動畫序列命令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* from 和 to 等價於 0% 和 100% */
@keyframes move{
from{
transform: translate(0,0);
}
to{
transform: translate(1000px,0);
}
}
/* 動畫序列 */
div{
width: 100px;
height: 100px;
background-color: greenyellow;
animation-name: move;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
動畫序列案例命令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 動畫序列 */
/* 1. 可以做多個狀態的變化 keyframes 關鍵幀*/
/* 2. 裏面的百分比要是整數 */
/* 3. 裏面的百分比就是 總得時間（我們這個案例10s）的劃分 */
@keyframes move{
0%{
transform: translate(0,0);
}
25%{
transform: translate(1000px,0);
}
50%{
transform: translate(1000px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
div{
width: 100px;
height: 100px;
background-color: greenyellow;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
2. 元素使用動畫
div{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/*調用動畫*/
animation-name：動畫名稱；
/*持續時間*/
animation-duration：持續時間；
}
2. 動畫常用屬性
| 屬性 | 描述 |
| @keyframes | 規定動畫。 |
| animation | 所有動畫屬性的簡寫屬性，除了animation-play-state屬性。 |
| animation-name | 規定@keyframes動畫的名稱。（必須的） |
| animation-duration | 規定動畫完成一個週期所花費的秒或毫秒，默認是0。（必須的） |
| animation-timing-function | 規定動畫的速度曲線，默認是“ease” |
| animation-delay | 規定動畫何時開始，默認是0. |
| animation-iteration-count | 規定動畫被播放的次數，默認是1， 還有infinite |
| animation-direction | 規定動畫是否在下一週期逆向播放，默認是“normal”，alternate逆播放 |
| animation-play-state | 規定多那個計劃是否正在運行或暫停。 默認是“running”，還有“pause” |
| animation-fill-mode | 規定動畫結束後狀態，保持forwards回到起始backwards |
動畫屬性命令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes move {
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}
div:hover{
/* 鼠標經過div 讓這個div 停止動畫， 鼠標離開就繼續動畫 */
animation-play-state: paused;
}
div{
width: 100px;
height: 100px;
background-color: greenyellow;
/* 動畫名稱 */
animation-name: move;
/* 持續時間 */
animation-duration: 2s;
/* 運動曲線 */
animation-timing-function: ease;
/* 何時開始 */
animation-delay: 1s;
/* 重複次數 iteration 重複的 count 次數 infinite 無限 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放 默認的是 normal 如果想要反方向 就寫 alternate*/
/* animation-direction: alternate; */
/* 動畫結束後的狀態 默認的是 backwards 回到起始狀態 我們可以讓它停留在結束狀態 forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s linear 0s 1 alternate forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
3. 動畫簡寫屬性
animation ： 動畫名稱 持續時間 運動開始 播放次數 是否反方向 動畫起始或者結束的狀態；
animation: myfirst 5s linear 2s infinite alternate;
簡寫屬性裏面不包含 animation-play-state
暫停動畫 ： animation-play-state: puased; 經過和鼠標經過等其他配合使用
想要動畫走回來， 而不是直接跳回來： animation-direction ： alternate
盒子動畫結束後，停在結束位置 ： animation-fill-mode ： forwards
動畫簡寫屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes move {
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}
div:hover{
/* 鼠標經過div 讓這個div 停止動畫， 鼠標離開就繼續動畫 */
animation-play-state: paused;
}
div{
width: 100px;
height: 100px;
background-color: greenyellow;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 前面2個屬性 name duration 一定要寫 */
animation: move 2s linear 0s 1 alternate forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
做一個地圖熱點圖：
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-color: #333;
}
.map{
position: relative;
width: 747px;
height: 616px;
background: url(images/map.png) no-repeat;
margin: 0 auto;
}
.city{
position: absolute;
top: 227px;
right: 193px;
color: #fff;
}
.tb{
top: 500px;
right: 80px;
}
.gz{
top: 532px;
right: 171px;
}
.dotted{
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保證我們小波紋在父盒子裏面水平垂直居中 放大之後就會中心向四周發散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009bfd;
border-radius: 50%;
animation: pulse 1s linear infinite;
}
.city div.pulse2{
animation-delay: 0.4s;
}
.city div.pulse3{
animation-delay: 0.6s;
}
@keyframes pulse{
0%{}
50%{
/* transform: scale(5); 我們不要用scale 因爲它會讓陰影變大 */
width: 30px;
height: 30px;
opacity: 1;
}
75%{
width: 45px;
height: 45px;
opacity: 0.6;
}
100%{
width: 60px;
height: 60px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city gz">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
網頁顯示圖：
4. 速度曲線細節
animation-timing-function ： 規定動畫的速度曲線，默認是“ease”
| 值 | 描述 |
| linear | 動畫從頭到尾的速度是相同的。勻速 |
| ease | 默認。 動畫以低速開始，然後加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
| steps（） | 指定了時間函數中的間隔數量（步長） |
速度曲線步長命令：
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
overflow: hidden;
font-size: 40px;
width: 0;
height: 30px;
background-color: greenyellow;
/* 讓我們的文字強制一行內顯示 */
white-space: nowrap;
/* steps 就是分幾步來完成我們的動畫 有了steps 就不要再寫 ease 或者 linear 了 */
animation: w 4s steps(5) forwards;
}
@keyframes w{
0%{
width: 0;
height: 50px;
}
100%{
width: 200px;
height: 50px;
}
}
</style>
</head>
<body>
<div>速度曲線步</div>
</body>
</html>
網頁顯示圖：
