What properties does css3 transition use?

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

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持续时间为2s，延迟时间为默认值0 */
            /* transition: 1s 2s; 代表持续时间为1s，延迟时间为2s */
        }
        .test:hover {
            width: 300px;
        }

    <div class="test"></div>

Related sub-properties

1、transition-property

transition-propertyThe attribute specifies the nametransition effect of the CSS attribute (the transition effect will start the change of the specified CSS attribute). none: no style is specified, all: default value, indicating that all styles of the specified element support the transition-property attribute. <transition-property>: transitionable style, you can write multiple styles separated by commas.

transition-duration attribute, otherwise the duration is 0 and the transition will have no effect.

颜色: 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

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持续时间为2s，延迟时间为默认值0；
              background-color持续时间2s 延迟0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }

transition-duration attribute specifies the time it takes to complete the transition effect ( in seconds or milliseconds). Default value: 0s.

transition-timing-functionThe attribute specifies the speed of the switching effect. It can take several values. Default value: ease.

4、transition-delay

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

[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

过渡阶段

• 过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。

• 过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值 。

• 过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值

• 以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准 。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 设置反向状态 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }

效果:

触发方式

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

• hover ： 鼠标悬停触发 。

• active ： 用户单击元素并按住鼠标时触发 。

• focus ： 获得焦点时触发。

• @media触发 ： 符合媒体查询条件时触发 。

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

（学习视频分享：css视频教程）

The above is the detailed content of What properties does css3 transition use?. For more information, please follow other related articles on the PHP Chinese website!