CSS 过渡

孤峰 161

CSS 过渡允许您在给定的时间内平滑地改变属性值

transition 属性是一个简写属性，用于设置四个过渡属性：

transition
transition-delay
transition-duration
transition-property
transition-timing-function

使用css过渡

如需创建过渡效果，必须明确两件事：

您要添加效果的 CSS 属性

效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0

属性

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

实例

div{ 
 width:100px; 
 transition: width 2s; 
 -moz-transition: width 2s; /* Firefox 4 */ 
 -webkit-transition: width 2s; /* Safari 和 Chrome */ 
 -o-transition: width 2s; /* Opera */ 
}

上一篇: css动画

下一篇: css3盒子变形(transform)

*声明：css过渡动画内容来源于网络收集和整理，版权归原著所有，如来源信息有误或侵犯权益，请联系站长作修改和删除处理。