動畫

動畫

之前使用過渡遇到的一些問題：
1.需要重複過渡效果時無法實現
2.只能通過hover等方式才能出發。

動畫：
1.通過@keyframs定義動畫。
2.在指定元素中，通過animation屬性來呼叫動畫。

1.定義動畫
格式：
@keyframes 動畫名 {
from{
初始幀
}
to{
結束幀
}
}
【注】動畫名不要起關鍵字，最好見名知意。

2.動畫的呼叫：
通過animation屬性來呼叫動畫。

 @keyframes dong {
第一種寫法
       form{初始值translate(0px, 0px)}
       to{結束值translate(50px, 0px)}可以只有結束值


第二種寫法
 0% {
         transform: translate(0px, 0px);           
            }
100% {
         transform: translate(0px, 0px);
         background-color: rgb(0, 25, 252);
            }
        }

animation-name：
動畫名稱

   animation-name: zhuan;

animation-duration
執行一次動畫的完成時間。

      animation-duration: 4s;

animation-iteration-count:
動畫的執行次數 1 2 3
infinite 表示無數次。

       animation-iteration-count:infinite;

animation-delay:
動畫延遲執行的時間。

       animation-delay: 0s;

animation-fill-mode:填充

       animation-fill-mode:none;

forwards：在動畫結束後，盒子保持結束幀狀態。

backwards 在動畫開始時，包含延遲時間，讓盒子保持初始幀狀態

both backwards forwards都生效

none(預設值)

animation-direction: 動畫的執行方式

animation-direction: alternate ;

1. alternate：交替執行。（按照來時的狀態完完整整的在回去）

2. normal 正常（預設）

3. reverse 反向 從結束幀開始到初始幀結束。

【注】alternate 反向也會算一次執行時間。

animation-timing-function:linear; 執行速度

• linear 勻速

• ease-in 加速

• ease-out 減速

• ease-in-out 先加速後減速

  注】動畫屬性要有中間狀態，一般是數值

         動畫呼叫 
        animation-name: dong;
       
        一次動畫完成時間 */
        animation-duration: 4s;
       
        延遲 */
        animation-delay: 0s;
      
         執行次數 */
        animation-iteration-count:infinite;
      
        動畫執行方式 */
        animation-direction: alternate ;
     
         填充模式——在動畫結束後，盒子保持結束幀狀態 */
        animation-fill-mode:forwards;
       
         速度 */
        animation-timing-function:ease-in-out;

animation-play-state 動畫執行狀態

• paused:暫停

• running 執行

                     當滑鼠經過的時候停止運動
 -  .box:hover{
            animation-play-state: paused ;
        }

濾鏡

透明度
filter: opacity(25%);
模糊
filter: blur(2px);
陰影
filter: drop-shadow(5px 5px 5px rgb(5, 5, 5));
亮度
filter: brightness(1);