css3 -- 过渡与动画

Posted 2020-07-15 zhanghuiyun

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、简写：

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

 

7、多重过渡

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

 

8、动画模块

1 @keyframes ’expend‘{
2    from{}
3    50%{}
4    to{}
5 }

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

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