CSS關鍵幀動畫
1、@keyframes 設定動畫規則。
2、animation 所有動畫屬性的簡寫屬性，用於設置六個動畫屬性：
animation-name/animation-duration/animation-timing-function/animation-delay/
animation-iteration-count/animation-direction
3、animation-name 屬性為@keyframes 動畫規則名稱。若設置為none則覆蓋已有的動畫效果。
4、animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是0。
5、animation-timing-function 規定動畫的速度曲線。默認是“ease”。
(1) linear規定以相同速度開始至結束的過度效果（等於cubic-bezier(0,0,1,1)）。
(2) ease 規定慢速開始，然後變快，然後慢速結束的動畫效果。（等於cubic-bezier(0.25,0.1,0.25,1)）
(3) ease-in 規定以慢速度開始的過度效果。（等於cubic-bezier(0.42,0,1,1)）
(4) ease-out 規定以慢速度結束的過度效果。（等於cubic-bezier(0,0,0.5,1)）
(5) ease-in-out 規定以慢速度開始和結束的過渡效果。（等於cubic-bezier(0.42,0,0.58,1)）
(6) cubic-bezier(n,n,n,n) 在cubic-bezier函數中定義自己的值。可能的值是0至1之間的數值。
6、animation-delay 規定動畫何時開始。默認是0。
7、animation-iteration-count 規定動畫被播放的次數。默認是1。infinite為無限次數播放。
8、animation-direction 規定動畫是否在下一周期逆向播放。默認是“normal順序播放”。/alternate動畫應該輪流反向播放。
9、animation-play-state 規定動畫是否在運行或暫停。默認是“running規定動畫正在播放。”/paused規定動畫暫停。
10、animation-fill-mode 規定對象動畫時間之外的狀態。
(1) none 不改變默認行為。
(2) forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
(3) backwards 在animation-delay 所指的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
(4) both 向前和向後填充模式都被應用。
案例：
#div1{
width: 150px;
height: 150px;
background: aqua;
border: #996633 3px double;
/*設置動畫的名稱和事件*/
animation-name: mydh;
animation-duration: 3s;
animation-timing-function:linear; /*規定動畫的速度曲線*/
animation-delay:1s;/*規定動畫何時開始。默認是0。*/
animation-iteration-count:3;/*規定動畫被播放的次數。默認是1。infinite為無限次數播放。*/
animation-direction:alternate; /*規定動畫是否在下一周期逆向播放。默認是“normal順序播放”。/alternate動畫應該輪流反向播放。*/
animation-fill-mode:forwards;/*規定對象動畫時間之外的狀態。*/
}
#div2{
margin-top: 30px;
width: 150px;
height: 150px;
background: yellow;
border: green 3px double;
/*復合屬性*/
animation: mydh 8s ease 0s 4 alternate;
}
/*設置動畫起始位置*/
@keyframes mydh{
/*第一種動畫方式*/
/* from{
margin-left: 20px;
background: yellow;
}
to{
margin-left: 800px;
background: yellowgreen;
} */
/*第二種動畫方式*/
0%{
margin-left: 20px;
background: yellow;
}
50%{
margin-left: 300px;
background: orange;
}
100%{
margin-left: 800px;
background: yellowgreen;
}
}
實例：圖片翻轉
*{
margin: 0;
padding: 0;
}
img{
width:100%;
height: 100%;
}
div{
width: 300px;
height: 450px;
margin-left: auto;
margin-right: auto;
border: 3px aqua double;
/*添加動畫*/
animation: fz 12s infinite;
}
body{perspective: 500px;/*子元素會獲得透視效果*/}
@keyframes fz{
0%{transform: rotateY(45deg);}
20%{transform: rotateY(180deg);}
40%{transform: rotateY(360deg);}
60%{transform: rotateX(45deg);}
80%{transform: rotateX(180deg);}
90%{transform: rotateX(360deg);}
100%{transform: rotateX(360deg);}
}
CSS關鍵幀動畫