animation（動畫）設置

 1、animation 動畫

　　概念：當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。

　　通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

• 規定動畫的名稱
• 規定動畫的時長

 把 "myMove" 動畫捆綁到 div 元素，時長：5 秒;

1. 動畫調用
2. 調用動畫的規則名稱
3. 動畫持續的時間（可選）
4. 動畫的過渡類型
5. 延遲時間
6. 動畫播放次數（默認1次，也可以成數字或者infinite則是無限循環）
7. 是否停留在結束狀態 forwards
8. 反向運動 alternate 1

 2、調用形式如下所示：---------------可以互相組合使用

-webkit-animation: myMove 2s ;
-webkit-animation: myMove 2s linear 2s infinite ;無限循環
-webkit-animation: myMove 2s linear 2s 2 ;循環2次
-webkit-animation: myMove 2s linear 2s forwards ;停留在結束位置
-webkit-animation: myMove 4s linear 2s infinite alternate ;反向運動不能在1次運動時實現，播放次數必須在2次或2次以上才可以實現

 3、復雜的動畫調用規則：

A、動畫規則的設置：

@-webkit-keyframes myMove {
from{
margin-left: 0px;
background-color: orange;
}to{
margin-left: 200px;
background-color: rosybrown;
}
}

B、動畫規則的設置，用百分比實現

 

@-webkit-keyframes myMove{

0%{ width: 200px; }
20%{ width: 200px; }
40%{width: 200px; }
60%{ width: 200px; }
100%{ width: 200px; }
}

 

 4、暫停動畫：

代碼：animation-play-state: paused;

用途：用在輪播上，要借用hover屬性來實現；表示鼠標移上去是動畫停止，移出時動畫繼續


實例：

下面是調用動畫：

#boxhidden{
border: 1px solid rosybrown;
width: 320px;
height: 213px;
overflow: hidden;
}

#boximg{
height: 213px;
width: 1920px;
font-size: 0;
animation: imgmove 4s linear infinite;
}

#boximg:hover{
animation-play-state: paused;
}

動畫規則設置：

@-webkit-keyframes imgmove {
0%{margin-left: 0px; }     10%{margin-left: -320px; }20%{ margin-left: -320px; }
30%{ margin-left: -640px; }40%{margin-left: -640px; }50%{margin-left: -960px; }
60%{ margin-left: -960px; }70%{margin-left: -1280px; }80%{margin-left: -1280px}
90%{margin-left: -1600px} 100%{margin-left: -1600px}
}