一、相關知識-動畫
1.基本使用：先定義再調用
2.
調用動畫
用keyframes定義動畫（類似定義類選擇器）
@keyframes動畫名稱{
0%{
width:100px；
}
100%{
width:200px;
}
}
使用動畫
div
{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/調用動畫/
animation-name:動畫名稱；
/持續時間/
animation-duration:持續時間；單位必須為秒
}
3.動畫
動畫序列
0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。
在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，百分號必須為整數，百分比的劃分就是時間的分配，或用關鍵詞"from"和"to",等同于0%和100%
動畫屬性
@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”,alternatei逆播放
animation-play-state:規定動畫是否正在運行或暫停。默認是"running",還有"pause"。簡寫里不包括這項
animation-fill-mode:規定動畫結束后狀態，保持forwards 回到起始backwards
簡寫：
動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態；
animation:myfirst 5s linear 2s ifinite alternate forwards;
二、相關案例-奔跑的白熊
1.素材
2.大致思路
1.html結構
放一個父盒子box和一個子盒子b,分別用于裝背景山和白熊
2.設計css樣式：
先設置奔跑的熊.box .b
由于熊為白色，給body背景一個顏色
注意：熊一共走了8步，圖片長為1600px，所以添加背景圖片時只顯示一個熊的片段長為200px
讓熊在原地跑：
定義bear動畫：一共8步，每一步0.8s，無限重復跑步動作
調用bear動畫：初始狀態為step1，末尾狀態為step8,整個背景圖片往左移，所以背景移動值為負
再讓熊跑到視窗中央：
定義move動畫：走2.5s，走到終點停止
調用move動畫：初始狀態在最左側，末尾狀態在屏幕中央，先移動left一半，再移動熊所在盒子（版心）本身的一半即可到中間
同時調用兩個動畫實現跑到中間的熊
再設置移動的山背景
注意由于山背景的寬度為3840px，超出視窗寬度，所以我們給山盒子加寬度時為100%，加背景圖片時要用repeat,否則會出現背景有一段為空白
定義mountain動畫：走20s,勻速，無限
調用mountain動畫：同熊原地跑動畫原理相同
我們想讓熊覆蓋在山上跑動，就要分別給子盒子和父盒子加子絕父相的定位，并給熊加bottom:0,使它在山最下跑
但是此時會發現山和熊在視窗上半部分，給山也加bottom:0,并不能實現，因為山的定位不固定在視窗中，所以要將山的相對定位改為固定定位
3.最終完整源碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #ccc;}.box {bottom: 0;width: 100%;height: 336px;position: fixed;background: url(image/bg1\(1\).png) repeat;animation: mountain 20s linear infinite;}.box .b {bottom: 0;position: absolute;width: 200px;height: 100px;background: url(image/bear\(1\).png) no-repeat;animation: bear 0.8s steps(8) infinite, move 2.5s forwards;}@keyframes bear {0% {background-position: 0;}100% {background-position: -1600px;}}@keyframes move {0% {left: 0;}100% {left: 50%;margin-left: -100px;}}@keyframes mountain {0% {background-position: 0;}100% {background-position: -3840px 0;}}</style>
</head><body><div class="box"><div class="b"></div></div>
</body></html>
)
)
