CSS的animation属性使用实例讲解

一、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使用方法是一样的。