css3学习总结9--CSS3过渡
2015-07-06 16:14
651 查看
CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡属性
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
实例
在一个例子中使用所有过渡属性:div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }
简写的 transition 实例
实例
与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:div { transition: width 1s linear 2s;/* Firefox 4 */ -moz-transition:width 1s linear 2s;/* Safari and Chrome */ -webkit-transition:width 1s linear 2s;/* Opera */ -o-transition:width 1s linear 2s; }
相关文章推荐
- css学习笔记一
- css3学习总结8--CSS3 3D转换
- css3学习总结7--CSS3 2D转换
- css笔记12:块元素和行内元素
- css3学习总结6--CSS3字体
- css3学习总结5--CSS3文本效果
- css3学习总结4--CSS3背景
- css3学习总结3--CSS3图像边框
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- css笔记11:选择器练习
- css笔记10:多个id选择器/类选择器包含相同部分问题的探讨
- CSS3制作精美的iphone电话图标,不使用图片
- css笔记09:选择器优先级
- css3学习总结2--CSS3圆角边框
- css3学习总结1--CSS3选择器
- css 浮动
- CSS学习笔记(记录一些小技巧)
- css笔记08:id选择器之父子选择器
- css中的颜色及长度