JunCai He

# 深入理解CSS过渡transition

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。4

# 定义

transition 是一个复合属性。包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

子属性 说明
transition-property 过渡属性(默认值为all)
transition-duration 过渡持续时间(默认值为0s)
transiton-timing-function 过渡函数(默认值为ease函数)
transition-delay 过渡延迟时间(默认值为0s)

WARNING

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀； 而其余高版本浏览器支持标准写法

<div class="box"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: salmon;
    /* transition-duration是必须的 且不能为0 */
    transition-duration: 3s; 
    
    /* 以下三个属性的值是默认值 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}
.box:hover{
    width: 300px;
}

鼠标移动到元素上，会出现宽度变化效果

# 复合属性

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

WARNING

  • 过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0
  • 复合属性的值除了<transition-duration>和<transition-delay>无先后顺序。
  • 第一个出现的时间 始终是transition-duration
  • transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性
/* 代码说明 以下的代码效果是一样的 */
transition: width 3s ease 1s;

transition: ease 3s width  1s;

transition: width 3s ease 1s;

transition:  3s 1s width ease

# 过渡属性

transition-property 该属性的值可以是none | all | 可过渡的样式，可用逗号分开写多个样式

可过渡的样式

可过渡的样式，可用逗号分开写多个样式。

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

# 过渡持续的时间

transition-duration 该属性的单位是秒s或毫秒ms。

WARNING

  • 该属性不能为负值
  • 若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
  • 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

# 过渡延迟时间

transition-delay 该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms

WARNING

  • 该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果
  • 若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
  • 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

# 过渡时间函数

transition-timing-function : 默认值ease

过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数

# steps函数

steps步进函数将过渡时间划分成大小相等的时间时隔来运行

steps(<integer>[,start | end]?)

<integer>: 用来指定间隔个数(该值只能是正整数)

第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持。

# 贝塞尔曲线

贝塞尔曲线通过p0-p3四个控制点来控制，其中p0表示(0,0)，p3表示(1,1)。而<transition-timing-function>就是通过确定p1(x1,y1)和p2(x2,y2)的值来确定的

// [注意] x1,y1,x2,y2都是0到1的值(包括0和1)
transition-timing-function: cubic-bezier(x1,y1,x2,y2);

# 关键字

关键字其实是 bezier函数或 steps函数的特殊值

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

# 多个属性值过渡

transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性

  • 1、若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可。
#box1{
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}
/*类似于*/
#box2{
    transition: width 2s linear 200ms,
                background 2s linear 200ms;
}
  • 2、当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值
#box1{
    transition-property: width, background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#box2{
    transition: width 2s linear 200ms,
                background 500ms ease 0s, 
                opacity 2s linear 200ms;
}
  • 3、当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，多余的属性值将无效
#box1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#box2{
    transition: width 2s linear 200ms;
}
  • 4、当transition-property的值中出现一个无效值，它依然按顺序对应transition的其他属性值(其他属性出现无效值，处理情况也类似)
#box1{
    transition-property: width,xxx,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#box2{
    transition: width 2s linear 200ms, background 2s linear 200ms;
}
  • 5、当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值， 但依然按顺序对应transition的其他属性值
#box1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#box2{
    transition: width 500ms ease 0s, background 2s linear 200ms;
}

# 触发方式

TIP

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

box.onclick = function(){
    box.style.width = '300px';
    setTimeout(function(){
        box.style.width = '300px';
    },3000);
}
Last Updated: 2/23/2023, 10:23:30 PM

← 鼠标样式 cursor →