• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>CSS3过渡

CSS3过渡

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 */
}