CSS transition

Previous words

Through transition, web front-end developers can achieve simple animation interaction effects without JavaScript. Transition properties may seem simple, but in fact there are a lot of details to pay attention to and things that can be confusing. This article will introduce and sort out the knowledge about CSS transition

Definition

Transition is a composite property, including transition-property, transition-duration, transition-timing-function , transition-delay these four sub-attributes. A complete transition effect can be completed through the cooperation of these four sub-attributes

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

[Note] IE9-does not support this attribute, safari3 .1-6, IOS3.2-6.1, android2.1-4.3 need to add the -webkit- prefix; while other higher version browsers support the standard writing

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    .test:hover{
    width: 500px;
}

4533d610cdb8960dc10af1294aeeedba94b3e26ee717c64999d7867364b1b4a3

//Move the mouse over the element, and the width change effect will appear

Composite attributes

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

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

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

.test{
    height: 100px;
    width: 100px;
    background-color: pink;/*代表持续时间为2s，延迟时间为默认值0s*/
    transition；2s;}    .test:hover{
    width: 500px;
}

<p class="test"></p>

##

.test{
    height: 100px;
    width: 100px;
    background-color: pink;    /*代表持续时间为1s，延迟时间为2s*/
    transition: 1s 2s;
}    .test:hover{
    width: 500px;
}

<p class="test"></p>

##Transition Properties

transition-property

Value: none | all | b0cfce2f2b39e6de691805c0c093e47f[,b0cfce2f2b39e6de691805c0c093e47f]*

Initial value: all

Applies to: All elements

Inheritance: None

none: 没有指定任何样式
all: 默认值，表示指定元素所有支持transition-property属性的样式<transition-property>: 可过渡的样式，可用逗号分开写多个样式

Transitible styles

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

Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值
Vres = (1 - p) * Vstart + p * Vend
当Vres具有有效值时，则该CSS样式可过渡

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

The unit of this attribute is seconds or milliseconds ms

transition-duration

Value: 46dd80ba616c57a652514755c74c4211[,46dd80ba616c57a652514755c74c4211]*

Initial value: 0s

Applies to: all elements

Inheritance: None

[Note] This attribute cannot be a negative value

[Note] If the attribute is 0s, it is the default value, if it is 0, it is an invalid value . Therefore, the unit must be

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

//DEMO中的过渡属性值transition-property: width,background;

Transition delay time

This attribute defines how long the element attribute is delayed After the transition effect starts, the unit of this attribute is seconds s or milliseconds ms

transition-delay

Value: 46dd80ba616c57a652514755c74c4211[,46dd80ba616c57a652514755c74c4211]*

Initial value: 0s

Applies to: all elements

Inheritance: None

[Note] If this attribute is a negative value, there will be no delay effect, but the start of the transition element will The initial value will change from 0 to the set value (set value = delay time + duration). If the setting value is less than or equal to 0, there will be no transition effect; if the setting value is greater than 0, the transition element will complete the remaining transition effect starting from the setting value

　[Note] If this attribute is 0s It is the default value, if it is 0, it is an invalid value. Therefore, the unit must be

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

//DEMO中的过渡属性值transition-property: width,background;

Transition time function

The transition time function is used to define the transition of elements The effect of transition speed change of attributes over time

transition-timing-function

Value: 66aa3d34d47552b7b986fe2a4b5468d0[,66aa3d34d47552b7b986fe2a4b5468d0]*

Initial value: ease

Applies to: all elements

Inheritance: None

Value

There are three values ​​for the transition time function, namely Keywords, steps function and bezier function

steps function

The steps step function divides the transition time into equal-sized time intervals to run

The steps step function is

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

<integer>:用来指定间隔个数(该值只能是正整数)
第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持

Bezier curve

The Bezier curve is controlled by four control points p0-p3, where p0 represents (0,0) and p3 represents (1 ,1). And 0cd58b9f0f99543f030aa199cd93c8c9 is determined by determining the values ​​of p1(x1,y1) and p2(x2,y2)

transition-timing-function: cubic-bezier(x1,y1,x2,y2);

　　[注意]x1,y1,x2,y2都是0到1的值(包括0和1)

关键字

　　关键字其实是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的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性

transtion: 09f907df7377e66249f520fd04c5fd69[,09f907df7377e66249f520fd04c5fd69]*

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

//property为all，timing-function为linear,delay为0s，duration为0s。表示无过渡行为transition: 0s;

【1】若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可

#test1{
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【2】当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

【3】当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，多余的属性值将无效

#test1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms;
}

【4】当transition-property的值中出现一个无效值，它依然按顺序对应transition的其他属性值(其他属性出现无效值，处理情况也类似)

#test1{
    transition-property: width,wuxiao,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【5】当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值，但依然按顺序对应transition的其他属性值

#test1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 500ms ease 0s,background 2s linear 200ms;
}

 

过渡阶段

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

【2】过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值

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

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

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}

【5】如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}

<p class="box">
    <p class="test">test</p>
</p>

【6】若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值

　　[注意]低版本webkit内核浏览器存在bug，会产生反向的过渡效果

.test{
    width: 100px;    -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}

【7】隐式过渡是指一个属性改变时引起另一个属性的改变。如border-width是1em，则font-size改变时，border-width也会相应的改变。firefox和IE浏览器支持隐式过渡。而webkit内核浏览器不支持隐式过渡。 

.test{
    border: 1px solid black;    -webkit-transition: font-size 2s;
    transition:font-size 2s;
    font: 20px/100px "宋体";
}    
.test:hover{
    font-size: 40px;
    border-right-width: 1em;
}

 

触发方式

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

【1】hover

　　鼠标悬停触发

【2】active

　　用户单击元素并按住鼠标时触发

【3】focus

　　获得焦点时触发

【4】@media触发

　　符合媒体查询条件时触发

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

【5】点击事件

　　用户点击元素时触发

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}

 

API

　　关于过渡transition的事件只有一个，是transitionend事件，它发生在过渡事件完成后

　　[注意]safari3.1-6、ISO3.2-6.1、android2.1-4.3需要使用webkitTransitionEnd事件

属性

　　transitionEnd的事件对象具有以下3个私有属性　　

　　propertyName：发生transition效果的CSS属性名

　　elapsedTime：代表发生实际效果的持续时间。若完整进行，则返回完整时间；若中途中断，则返回实际时间

　　[注意]该属性具有兼容性问题，chrome返回持续时间加延迟时间，而其他浏览器只返回持续时间

<style>#test{height: 100px;width: 100px;background-color: pink;
    transition: width 1.5s 0.5s;}#test:hover{width: 200px;}</style><p id="test"></p><script>test.addEventListener("transitionend", myFunction);function myFunction(e){
    e = e || event;
    test.innerHTML = &#39;propertyName:&#39; + e.propertyName + &#39;; elapsedTime:&#39; + e.elapsedTime + &#39;; pseudoElement:&#39; + e.pseudoElement;
}</script>

　　 pseudoElement：如果transition效果发生在伪元素，会返回该伪元素的名称，以“::”开头。如果不发生在伪元素上，则返回一个空字符串''

　　[注意]若transition效果发生在伪元素上，IE浏览器将不会触发transitionEnd事件

<style>#test{height: 100px;width: 100px;position: relative;background-color: lightblue;}#test:before{content:&#39;我是伪元素&#39;;position: absolute;height: 100px;width: 100px;background-color: pink;
    left:200px;}#test:hover:before{width: 200px;transition: width 1.5s 0.5s;}</style><p id="test"></p><script>test.addEventListener("transitionend", myFunction);function myFunction(e){
    console.log(event)
    e = e || event;
    test.innerHTML = &#39;propertyName:&#39; + e.propertyName + &#39;; elapsedTime:&#39; + e.elapsedTime + &#39;; pseudoElement:&#39; + e.pseudoElement;
}</script>

注意事项

【1】过渡分为两个阶段：前进阶段和反向阶段。transitionend事件在前进阶段结束时会触发，在反向阶段结束时也会触发

var index = 0;//兼容低版本safari、IOS、androidtest.addEventListener("webkitTransitionEnd", myFunction);// 标准语法test.addEventListener("transitionend", myFunction);function myFunction() {
    index++;    this.innerHTML = index;}

【2】过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

    transition: width 1s,background-color 1s;    -webkit-transition: width 1s,background-color 1s;

【3】如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

　　[注意]在低版本webkit内核浏览器里只触发1次

    transition:border-width 1s;    -webkit-transition: border-width 1s;

【4】如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数。如果发生过渡的属性是border-width和width，则经过计算后过渡事件应该触发5次

　　[注意]在低版本webkit内核浏览器中处理情况也一致

.test{
    width: 50px;
    border: 1px solid black;
    transition:all 1s;    -webkit-transition: all 1s;
}    
.test:hover{
    border-width: 10px;
    width: 100px;
}

【5】如果过渡延迟时间为负值，且绝对值大于等于过渡持续时间时，低版本webkit内核浏览器不会产生过渡效果，但会触发过渡事件；而其他浏览器即不会产生过渡效果，也不会触发过渡事件

    transition:width 1s -1s;    -webkit-transition: width 1s -1s;

【6】如果过渡属性存在复合属性及该复合属性包含的非复合属性，则浏览器计算复合属性的子属性时，不会重复计算已包含的属性

　　[注意]低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次

.test{
    border: 1px solid black;
    transition:border-width 1s,border-left-width 2s;    -webkit-transition: border-width 1s,border-left-width 2s;
}    
.test:hover{
    border-width:10px;
}

　　[注意]当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响

var index = 0;//兼容低版本safari、IOS、androidtest.addEventListener("webkitTransitionEnd", myFunction);// 标准语法test.addEventListener("transitionend", myFunction);function myFunction() {
    index++;    this.innerHTML = index;    if(index == 1){
        test.removeEventListener("webkitTransitionEnd", myFunction);
        test.removeEventListener("transitionend", myFunction);
    }
}

更多CSS过渡transition 相关文章请关注PHP中文网！