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:10; 
　　animation-direction:alternate--反向循环; --- normal--正常循环 8 
  }

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