css3 -- 过渡与动画

1、注意使用前缀

2、属性：

transition-property：none/all/属性

3、持续时间：

transition-duration：默认值是0，即使是负值，按照0进行处理

4、transition-timing-function：ease(默认值)  /   linear    /   ease-in    /   ease-out   /   ease-in-out

5、延迟：

transition-delay：默认值是0

6、简写：

 E{
    transition：transition-property transition-duration transition-timing-function transition-delay;
 }

7、多重过渡

E{
   transition-property：border ， height ， width；
   transition-duration：4s ， 500ms；
}
width会匹配 transition-duration的第一个值

8、动画模块

 @keyframes ’expend‘{
    from{}
    50%{}
    to{}
 }

 div{
     animation-name :expend; 
 　　animation-duration:6s; 
 　　animation-timing-function:ease-in; 
 　　animation-delay:2s; 
 　　animation-iteration-count:; 
 　　animation-direction:alternate--反向循环; --- normal--正常循环  
  }

animation-play-state：running、paused    ---- 播放状态