What properties does css3 transition use?

The attributes used in css3 transition are: 1. transition; 2. transition-property; 3. transition-duration; 4. transition-timing-function; 5. transition-delay.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 Transition is the effect of an element gradually changing from one style to another.

To achieve this, two things must be specified:

• Specify the CSS property to add the effect

• Specify the effect duration.

Through the transition attribute, web front-end developers can achieve simple animation interaction effects without JavaScript. To achieve this, one thing must be implemented, that is, the specified effect duration.

css3 transition property

Property	Description	CSS
transition	Abbreviation attribute, used to set four transition attributes in one attribute.	3
transition-property	Specifies the name of the CSS property that applies the transition.	3
transition-duration	Define how long the transition effect takes. The default is 0.	3
transition-timing-function	Specifies the time curve of the transition effect. The default is "ease".	3
transition-delay	Specifies when the transition effect starts. The default is 0.	3

Composite attributes

## Of these four sub-attributes of transition, only is a required value and cannot be 0. Among them, and are both times. When two times occur at the same time, the first is , and the second is ; when there is only one time, it is , and is the default value 0

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

[Note] The four sub-properties of transition cannot be separated by commas, but can only be separated by spaces. Because the ones separated by commas represent different attributes (the transition attribute supports multi-value, the multi-value part will be introduced later); and the ones separated by spaces represent four sub-attributes about transition of different attributes.

        .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-property>

Note: Always specify the

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

1), transitionable styles

Not all CSS style values ​​​​can be transitioned, only attributes with intermediate values ​​​​have transition effects, as follows

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

Rendering:

2. Transition-duration

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

[Note]This attribute cannot be negative.

[Note] If this attribute is 0s, it is the default value, if it is 0, it is an invalid value. So you must bring the unit.

[Note] When the value is a single value, that is, all transition attributes correspond to the same time; when the value is multi-value, the transition attributes correspond to the duration in order.

3. Transition-timing-function

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

ValueDescription##lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)

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视频教程）

is specified in The transition effect starts and ends at the same speed, that is, uniform speed. (Equal to cubic-bezier(0,0,1,1)).
Specifies the transition effect that starts slowly, then becomes faster, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).
Specifies a transition effect that starts at a slow speed (equal to cubic-bezier(0.42,0,1,1)).
Specifies a transition effect that ends at a slow speed (equal to cubic-bezier(0,0,0.58,1)).
Specifies a transition effect that starts and ends at a slow speed (equal to cubic-bezier(0.42,0,0.58,1)).
Define your own values ​​in the cubic-bezier function. Possible values ​​are between 0 and 1.

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!