CSS學習筆記-動畫模塊

動畫模塊：
    一、過渡和動畫之間的異同
        1.1不一樣點
            （1）過渡必須人爲觸發才能執行
            （2）動畫不須要人爲觸發就能夠執行
        1.2相同
            （1）過渡和動畫都是能夠用來給元素添加動畫的
            （2）過渡和動畫都是系統新增的一些屬性
            （3）過渡和動畫都須要知足三要素纔有動畫效果

    二、格式：
        2.1三要素：
            （1）告訴系統須要執行的動畫名稱

 animation-name:animation_name;

 

            （2）建立一個帶名稱的動畫
             　　   ①第一種建立方式：

1　　 @keyframes animation_name { 2　　　　from{ 3　　　　　　margin-left:0; 4　　　　} 5　　　　to{ 6　　　　　　margin-left:100px; 7　　　　}　　 8}

             　　   ②第二種建立方式：   

1 　　@keyframes animation_name{ 2  　　 0%{} 3  　　  25%{} 4  　　 . 5  　　 . 6  　　 . 7  　　 100%{} 8 　　}

 

            （3）告訴系統動畫持續的時長：

 animation-duration:3s;

 

        2.2實例：

 1            <style>
 2  div{
 3  height: 100px;
 4  width: 200px;
 5  background-color: red;
 6  animation-name:animation_move;
 7  animation-duration:5s;
 8                }


 9  @keyframes animation_move{
10  form{ 11  margin-left:0;
12                    }
13  to{
14  margin-left: 500px;
15                    }
16  } 17            </style>    

      2.3注意點：
            （1)動畫中若是有和默認樣式中同名的屬性，會覆蓋默認樣式中同名的屬性
            （2)在編寫動畫的時候，固定不變的值寫在前面，須要變化的值寫在後面

  三、其餘屬性
        3.1延遲開始：

 animation-delay:2s;(默認0s)

   

　　  3.2速度曲線：

 animation-timing-function:linear;  (linear/ease/ease-in/ease-out/ease-in-out)

        3.3動畫執行次數：

 animation-iteration-count:3;

            取值：
            （1）具體次數（數字）
            （2）特定名詞：infinite（無窮）

 

        3.4是否往返動畫：    

　　　　animation-direction:alternate;

            取值：
                normal:默認取值，不進行往返
                alternate:執行往返動畫，且往返一次算做兩次動畫

 

        3.5控制動畫執行與暫停

 　　　animation-play-state:running;

            取值：
                running:默認取值，正常執行動畫
                paused:動畫暫停

 

        3.6指定動畫等待狀態和結束狀態的樣式：

　　　　animation-fill-mode:none;

            取值：
                none:默認取值
                forwards:讓元素結束狀態的時候保持動畫最後一幀
                backwards:讓元素等待狀態的時候顯示動畫第一幀
                both:同時實現forwards和backwards的效果

 

 

動畫模塊-連寫：
    一、格式：

 animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
        animation:   動畫名稱 動畫持續時間　動畫運動速度　延遲時間　執行次數　往返動畫;

    二、簡寫：

　　　　 animation:animation-name animation-duration;

 

　　

本節專有詞語：
    animation:    動畫
    duration:    持續
    delay:        延遲時間
    function:    做用、功能
    iteration:  循環、重複
    infinite:    無限的
    direction:    方向
    normal:        正常的
    alternate:    交替、輪流
    paused:        暫停
    forwards:    向前、從此
    backwards:    向後