一，動畫的使用必須要準備
1，準備動畫@keyframes關鍵字定義
2，需要爲想要使用動畫的dom元素 添加一系列的動畫屬性。
/* 1，定義動畫 */
@keyframes toright{
from{
/* from中如果不設置默認使用的是 初始狀態 */
}
to{/* 移動方向 */
transform:translateX(800px);
}
}
/* 2，準備class 內部定義了動畫的各種效果 */
.animation{
/* 動畫的名字 */
animation-name:toright;
/* 動畫持續多久 */
animation-duration:2s;
/* 設置動畫的次數 infinite是無限*/
animation-iteration-count:infinite;
/* 動畫的速度 線性 linear勻速 */
animation-timing-function:linear;
/* 動畫的延遲時間 */
animation-delay:2s;
/* 動畫的填充方式 */
animation-fill-mode:both;
}
/* 動畫屬性的符合寫法： */
.animation-oneline{
/* 複合寫法：
第一次出現的時間是持續時間，
第二次出現的時間是延遲時間。 */
animation:toright 1s 2s linear infinite;
}
二，精確設置動畫的過程 ，分步設置動畫
@keyframes stepAnimation{/* 動畫可以分成多段 */
/* 起始狀態 */
0%{
}
/* 動畫播放一半 */
50%{
transform:translateX(1000px);
}
/* 返回到起始位置 */
100%{
transform:translateX(0);
}
}
.animation{
animation:toright 1s 2s stepAnimation;
}
三，小汽車案例：
從左到右後旋轉180度
@keyframes autoMove{
0%{}
/* 移動到最右邊 */
45%{
transform:translateX(1000px);
}
/* 原地旋轉180度 */
50%{
/* 在移動到最右的基礎上原地旋轉translateX(1000px)，否則會瞬間回到起始位置 */
transform: translateX(1000px) rotateY(180deg);
}
/* 移動回最左邊 */
95%{
transform: translateX(0px) rotateY(180deg);
}
}
.animation{
/* 3秒鐘勻速播放 */
animation:autoMove 3s linear infinite;
}四，動畫暫停，鼠標懸停：
animation-play-state:paused;
<style>
body{
perspective:1000px;
}
.container{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
background: url("wjtz.jpg") no-repeat center/cover;
position: relative;
transform-style:preserve-3d;
}
.item{
width:100%;
height: 100%;
position: absolute;
background: url("lf.jpg") no-repeat center/cover;
}
.item:nth-child(1){
transform:rotateY(0deg) translateZ(300px);
}
.item:nth-child(2){
transform:rotateY(60deg) translateZ(300px);
}
.item:nth-child(3){
transform:rotateY(120deg) translateZ(300px);
}
.item:nth-child(4){
transform:rotateY(180deg) translateZ(300px);
}
.item:nth-child(5){
transform:rotateY(240deg) translateZ(300px);
}
.item:nth-child(6){
transform:rotateY(360deg) translateZ(300px);
}
@keyframes autoMove{
from{}
to{
transform:rotateY(300deg);
}
}
.animation{
/* 3秒鐘勻速播放 */
animation:autoMove 3s linear infinite;
}
/* 鼠標懸停時停止動畫 */
.container:hover{
/* 動畫狀態 */
/* 如果要使用js操作該屬性語法是:dom.style.animationPlayState="paused"; */
animation-play-state:paused;
/* 這裏如果給animation重新賦值的話，會覆蓋掉以上的animation效果，鼠標經過也會停止，但是不會是從鼠標懸停的那張圖片開始播放，而是重新開始播放。 */
/* animation:haha; */
}
</style>
</head>
<body>
<div class="container animation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>