一、animation的語法
 
1、@keyframes——插入關鍵幀
 
(1)FormTo形式：

CSS Code復制內容到剪貼板

@keyframes demo {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
}  

 
 
(2)百分比的形式：
 

CSS Code復制內容到剪貼板

@keyframes demo {   
      0% {   
         Properties:Properties value;   
      }   
      Percentage {   
         Properties:Properties value;   
      }   
      100% {   
         Properties:Properties value;   
      }   
}  

 
 
2、animation-name——定義動畫的名稱

animation-name: none | “動畫的名稱”;
 
 
(1)動畫的名稱是由Keyframes創建的動畫名，這里必須和創建的動畫名保持一致。如果不一致,將不能實現任何動畫效果
(2)none為默認值，當值為none時，將沒有任何動畫效果
 
3、animation-duration
 
animation-duration: time (s)
 
 
animation-duration是指定元素播放動畫所持續的時間，取值為數值，單位為秒(s)，其默認值為“0”。
 
4、animation-timing-function
 
animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速后減速) || linear(勻速) || cubic-bezier(自定義一個時間曲線)
 
 
animation-timing-function是用來指定動畫的播放方式，具有以下六種變換方式：ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速后減速);linear(勻速);cubic-bezier(自定義一個時間曲線)。
 
5、animation-delay
 
animation-delay: time(s)
 
 
animation-delay:是用來指定元素動畫開始時間。取值為數值，單位為秒(s)，其默認值為“0”。這個屬性和animation-duration使用方法是一樣的。