CSS3 过渡-CSDN博客

本文链接：https://blog.csdn.net/hunter_97/article/details/116699634

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。

一、过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

二、实例

span{
    display:block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 50px;
}
span.transition{
    display:block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    transition: padding-left 0.25s, border-left 0.5s;
    -webkit-transition: padding-left 0.25s, border-left 0.5s;
    -moz-transition: padding-left 0.25s, border-left 0.5s;
}
span:hover{
    padding-left: 5px;
    border-left: 3px solid rgba(0, 155,0, 1);
}

三、相关属性。

transition-propertytransition-property属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化)。默认值：all 。
注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

span.width{
    display:block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition-property: width;
    transition-duration: 0.5s;
}
span.width:hover{
    width: 200px;
}
span.height{
    display:block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    transition-property: height;
    transition-duration: 0.5s;
}
span.height:hover{
    height: 100px;
}

transition-property.gif

transition-durationtransition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值：0 。

span{
    display:block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition-property: width;
}
span.one-s{
    transition-duration: 1s;
}
span.two-s{
    transition-duration: 2s;
}
span.three-s{
    transition-duration: 3s;
}
span:hover{
    width: 200px;
}

transition-duration.gif

transition-timing-functiontransition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值：ease 。

值	描述
linear	规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in	规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out	规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out	规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

span{
    display:block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition-property: width;
    transition-duration: 3s;
}
span.linear{
    transition-timing-function: linear;
}
span.ease{
    transition-timing-function: ease;
}
span.ease-in{
    transition-timing-function: ease-in;
}
span.ease-out{
    transition-timing-function: ease-out;
}
span.ease-in-out{
    transition-timing-function: ease-in-out;
}
span.cubic-bezier{
    transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
span:hover{
    width: 200px;
}

transition-timing-function.gif

transition-delaytransition-delay属性指定何时将开始切换效果，值是指以秒为单位(S)或毫秒(ms)。默认值：0 。

span{
    display:block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
}
span.transition-delay-1s{
    transition-delay: 1s;
}
span.transition-delay-2s{
    transition-delay: 2s;
}
span.transition-delay-3s{
    transition-delay: 3s;
}
span:hover{
    width: 400px;
}

transition-delay.gif

四、应用实例

简写
语法：transition: property duration timing-function delay;,duration、delay可以省略会自动配置为默认值。

span{
    display:block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 1s;
}
//相当于
span{
    display:block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition: width 2s ease 1s;
}
//相当于
span{
    display:block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition: width 2s;
}

多项简写
语法：transition: property duration timing-function delay , property1 duration1 timing-function1 delay1 , ...propertyx durationx timing-functionx delayx;；同上，duration、delay可以省略会自动配置为默认值。

span{
    display:block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    background: rgba(0, 155,0, 0.25);
    margin-bottom: 20px;
    transition: width 2s , height 2s;
}