css3_实现动画设置其过渡过程中的效果_transition
2016-04-08 11:48
941 查看
规定div区域 当鼠标放上去后由宽度100px变为200px
说明:
transition: property duration timing delay;
div{width:100px;} div:hover{width:200px;}设置宽度100px到200px变化过程的过渡效果【设置width变化的过渡效果,过渡时间为2s,以相同速度运行(linear),延迟1s开始】
div{width:100px; transition:width 2s linear 1s; -moz-transition:width 2s linear 1s; /* Firefox 4 */ -webkit-transition:width 2s linear 1s; /* Safari and Chrome */ -o-transition:width 2s linear 1s; /* Opera */ }
说明:
transition: property duration timing delay;
property | 设置过渡效果的 CSS 属性名称。【如width等,默认值all】 |
duration | 完成过渡效果的时间 |
timing | 速度效果的速度曲线【如linear,easa等】 |
delay | 过渡效果延迟开始时间 |
相关文章推荐
- css sprites-简单实例让你快速掌握css sprites精髓
- HTML与CSS常见误区1
- 实现三个并排div,两边固定宽度,中间自适应的四个方法
- CSS之外边距折叠
- CSS3阴影 box-shadow的使用和技巧总结
- 引用js或css后加?v= 版本号的用法
- 可以从CSS框架中借鉴到什么
- ie8兼容css3的样式 如@media
- html的文件控件<input type="file">样式的改变
- CSS Sprite——雪碧图
- HTML 和 CSS
- CSS3选择器(上)
- ie8如何使用rgba样式
- Learn CSS
- CSS样式_链接&列表
- CSS样式_字体
- CSS魔法堂:你一定误解过的Normal flow
- Word2010编号、多级列表、样式、图注的综合设置
- CSS之Position详解
- CSS禅意