码迷,mamicode.com
首页 > Web开发 > 详细

css3 -- 过渡与动画

时间:2016-05-29 15:08:50      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

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    ---- 播放状态

css3 -- 过渡与动画

标签:

原文地址:http://www.cnblogs.com/zhanghuiyun/p/5539439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!