首页 > Web开发 > 详细

css3 -- 过渡与动画

时间:2016-05-29 15:05:58      阅读:285      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!