CSS transition Transition

Previous words

Transition transition allows web front-end developers to achieve simple animation interactions without the need for JavaScript. The transition attribute may seem simple, but in fact it has a lot of attention to detail and easy to confuse. This article will introduce and comb the knowledge about CSS transitions

Defined

Transition transition is a composite attribute that includes Transition-property, Transition-duration, Transition-timing-function, Transition-delay these four sub-attributes. Complete a full transition with the mates of these four sub-attributes

Transition-property: Transition Property (default = All) Transition-duration: Transition duration (default is 0s) transiton-timing-function: transition function (default = Ease function) Transition-delay: Transition delay Time (default value is 0s)

Note Ie9-does not support this property, Safari3.1-6, ios3.2-6.1, android2.1-4.3 need to add a-webkit-prefix, while the remaining high-version browsers support standard notation

. test{    height:100px;    width:100px;    Background-color:pink;    transition-duration:3s;/* the     following three values are the default values, which will be described in more detail */    Transition-property:all;    Transition-timing-function:ease;    transition-delay:0s;}    . test:hover{    width:500px;}

<p class= "Test" ></p>

The width change effect occurs when the mouse moves over the element

Composite properties

These four sub-properties of the transition transition are only required for <transition-duration> and cannot be 0. Both,<transition-duration> and <transition-delay> are time. When two times appear at the same time, the first one is <transition-duration> the second is <transition-delay>; when there is only one time, it is <transition-duration> , and <transition-delay> is the default value of 0

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

[Note that the four sub-attributes of the]transition cannot be separated by commas, but only by a space. Because commas are separated to represent different attributes (the Transition property supports multiple values, the multi-value section is described later), and spaces are separated by four sub-attributes about transitions that represent different properties

. test{    height:100px;    width:100px;    The background-color:pink;/* represents a duration of 2s, and the delay time is the default value 0s*/    transition;2s;}    . test:hover{    width:500px;}

<p class= "Test" ></p>

. test{    height:100px;    width:100px;    Background-color:pink;    /* represents a duration of 1s and the delay time is 2s*/    transition:1s 2s;}    . test:hover{    width:500px;}

<p class= "Test" ></p>

Transition properties

Transition-property

Value: none | All | <transition-property>[,<transition-property>]*

Initial value: All

Applies to: all elements

Inheritance: None

None: No style specified all: Default value representing all style <transition-property> for the specified element that supports the Transition-property attribute;: Transition style, multiple styles can be written separately by commas

Styles that can be transitioned

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

Vstart = start value; Vend = end value; Vres = intermediate value; p = output value of the transition function Vres = (1-p) * vstart + p * Vend when vres has a valid value, the CSS style can transition

Colour: color Background-color border-color outline-color Position: Backround-position left right top bottom length:     [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 Number: Opacity Visibility z-index Font-weight Zoom Combo: Text-shadow Transform Box-shadow clip other: Gradient

Transition duration

The unit of the property is seconds s or milliseconds ms

Transition-duration

Value: <time>[,<time>]*

Initial value: 0s

Applies to: all elements

Inheritance: None

[note] This property cannot be a negative value

[note] If the property is 0s, the default value, or 0 is an invalid value. So you have to bring the unit

[note] When the value is a single value, that is, all the transition properties correspond to the same time; When the value is multivalued, the Transition property corresponds to the duration in order

The transition attribute value in demo is Transition-property:width,background;

Transition delay Time

This property defines how long the element property is delayed after the transition effect is started, the unit of the property is seconds s or milliseconds ms

Transition-delay

Value: <time>[,<time>]*

Initial value: 0s

Applies to: all elements

Inheritance: None

[note] If this property is negative, there is no delay effect, but the starting value of the transition element will change from 0 to a set value (SetPoint = delay time + duration). If the setting value is less than or equal to 0, there is no transition effect, and if the setting value is greater than 0, the transition element completes the remaining transition from this set value.

[note] If the property is 0s, the default value, or 0 is an invalid value. So you have to bring the unit

[note] When the value is a single value, that is, all the transition properties correspond to the same time; When the value is multivalued, the Transition property corresponds to the duration in order

The transition attribute value in demo is Transition-property:width,background;

Transition Time function

The transition time function defines the effect of transition speed changes in element transition properties over time

Transition-timing-function

Value: <timing-function>[,<timing-function>]*

Initial value: Ease

Applies to: all elements

Inheritance: None

Take value

There are three kinds of values for transition time function, namely keyword, 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>: Used to specify the number of intervals (the value can only be a positive integer) the second parameter: The parameter is optional, the default is end, which means that the start value is persisted once, and if the argument is start, the beginning does not persist

Bezier curve

Bezier curves are controlled by P0-p3 four control points, where P0 is represented (0,0), and P3 is represented (in). <transition-timing-function> is determined by determining the values of P1 (x1,y1) and P2 (x2,y2).

Transition-timing-function:cubic-bezier (X1,Y1,X2,Y2);

[Note that the]x1,y1,x2,y2 are values from 0 to 1 (including 0 and 1)

Key words

The keyword is actually a special value of a Bezier function or steps function.

Ease: Start and end slow, middle fast. Equivalent to Cubic-bezier (0.25,0.1,0.25,1) Linear: constant speed. Equivalent to Cubic-bezier (0,0,1,1) ease-in: Starts slowly. Equivalent to Cubic-bezier (0.42,0,1,1) ease-out: End slow. Equivalent to Cubic-bezier (0,0,0.58,1) Ease-in-out: Similar to ease, but larger than ease amplitude. Equivalent to Cubic-bezier (0.42,0,0.58,1) Step-start: Located directly at the end. Equivalent to Steps (1,start) Step-end: Ends at the beginning, after the time interval. Equivalent to Steps (1,end)

Multi-value

Transition multiple attribute values separated by commas indicates that you can set transition properties for multiple values at the same time

Transtion: <single-transition>[,<single-transition>]*

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

The property is all,timing-function for linear,delay and 0s,duration for 0s. Indicates no transition behavior transition:0s;

"1" If the Transition-property value is different, the corresponding Transition-delay | transition-timing-function | Transition-duration property values are all the same, the corresponding properties are set to one

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

"2" When the number of Transition-property values is greater than the corresponding Transition-delay | transition-timing-function | Transition-duration the value of a property (the number of property values is greater than 1), the values are started sequentially

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

"3" When the number of Transition-property values is less than the corresponding Transition-delay | transition-timing-function | The extra property value will not be valid when the number of attribute values for Transition-duration

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

"4" When an invalid value appears in the value of transition-property, it still corresponds to the other property values of transition in order (other properties have invalid values and are handled similarly)

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

"5" When the value of Transition-property, some of the values are repeated multiple times, the last occurrence of the value of the previous values are considered invalid values, but still in order to correspond to the transition of the other property values

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

Transition phase

"1" transition start time = moment of Style change + transition delay time, transition end time = transition start time + transition duration

"2" transition Start value = transition attribute value before transition, and transition end value = Transition property value after transition is complete

The "3" transition is divided into two stages: forward (forward) and reverse (reverse). If the forward phase enters the reverse phase after a period of time, the initial value of the reverse phase is the instantaneous value at the end of the forward phase.

"4" takes hover as an example, if the element is not hover state set transition, equivalent to the reverse state of the setting. And the forward and the reverse are consistent. If the transition is set in the hover state of the element, then the forward status is set to the hover, and the reverse state is based on the non-hover setting.

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

"5" If the child element and parent element transition properties are consistent. If the parent element is transitioning when a child element transition is triggered, the value of the intermediate state of the transition of the parent element as the initial value of the child element transition

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

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

"6" If the transition start value or the transition start value is auto, then the browser does not calculate the specific numeric value itself, but does not have a transition effect. So to transition some properties, you first need to reset them to a specific numeric value

[note] There is a bug in the low version WebKit kernel browser, which will produce a reverse transition effect.

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

The "7" implicit transition refers to a change in one property that causes another property to be changed. If the border-width is 1em, then font-size changes, Border-width will change accordingly. Firefox and IE browsers support an implicit transition. An implicit transition is not supported by the WebKit kernel browser.

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

Trigger mode

In general, there are three ways to trigger transition transition, namely pseudo-class triggering, media query triggering, and JavaScript triggering. Among the commonly used pseudo-class triggers are: hover,: Focus,: active, etc.

"1" hover

Mouse Hover Trigger

"2" active

Triggered when the user clicks on an element and presses the mouse

"3" focus

Trigger when focus is obtained

"4" @media trigger

triggered when media query criteria are met

/* Drag the width of the browser to the trigger at less than 1000px */@media (max-width:1000px) {    . test{        width:500px;    }}

"5" click event

Triggered when the user clicks on an element

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

Api

There is only one event about the transition transition, which is the Transitionend event, which occurs after the transition event is complete

[Note]safari3.1-6, iso3.2-6.1, android2.1-4.3 need to use Webkittransitionend event

Property

The Transitionend event object has the following 3 private properties

PropertyName: The name of the CSS property where the transition effect occurred

ElapsedTime: Represents the duration in which the actual effect occurs. Returns the full time if complete, or the actual time if the interrupt is interrupted

[note] This property has compatibility issues, chrome returns duration plus delay time, while other browsers only return duration

<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 = ' propertyname: ' + E.propertyname + '; ElapsedTime: ' + e.elapsedtime + '; Pseudoelement: ' + e.pseudoelement;} </script>

Pseudoelement: If the transition effect occurs in a pseudo-element, the name of the pseudo-element is returned, beginning with "::". Returns an empty string ' ' if it does not occur on a pseudo-element

[note] If the transition effect occurs on a pseudo-element, IE will not trigger the Transitionend event

<style> #test {height:100px;width:100px;position:relative;background-color:lightblue;} #test: before{content: ' I am a pseudo-element ';p Osition: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 = ' propertyname: ' + E.propertyname + '; ElapsedTime: ' + e.elapsedtime + '; Pseudoelement: ' + e.pseudoelement;} </script>

Precautions

The "1" transition is divided into two stages: the forward stage and the reverse phase. The Transitionend event is triggered at the end of the forward phase and is triggered at the end of the reverse phase.

var index = 0;//compatible with low version safari, IOS, Androidtest.addeventlistener ("Webkittransitionend", myFunction);// Standard syntax Test.addeventlistener ("Transitionend", myFunction), function myFunction () {    index++;    this.innerhtml = index;}

The number of "2" transition events triggered is related to the number of Transition-property transition properties. A few of the transition properties will be triggered several times.

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

"3" If the transition property is a composite attribute, such as border-width equivalent to Border-top-width, Border-bottom-width, A collection of four properties, Border-left-width and Border-right-width. The transition event is triggered 4 times

[note] Only 1 triggers in the low version WebKit kernel browser

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

"4" If the Transition property is the default of all, the number of transition events is the number of non-composite transition properties after the calculation. If the attribute that occurs is border-width and width, then the calculated transition event should be triggered 5 times

[note] processing is also consistent in the low version WebKit kernel browser

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

"5" If the transition delay time is negative and the absolute value is greater than or equal to the transition duration, the lower version of the WebKit kernel browser does not produce a transition, but it triggers a transition event, and the other browser does not have a transition effect and does not trigger a transition event

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

"6" If a staging property exists with a composite attribute and the composite property contains a non-composite property, the browser calculates the child property of the composite property without repeating the included property

[note] A bug occurs in a low version of the WebKit kernel browser, not only that the composite property is treated as a property to trigger the event, but also that it fires more

. 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;}

[note] When the transition event is finished, you should use RemoveEventListener to unbind it in time to avoid affecting other effects

var index = 0;//compatible with low version safari, IOS, Androidtest.addeventlistener ("Webkittransitionend", myFunction);// Standard syntax Test.addeventlistener ("Transitionend", myFunction), function myFunction () {    index++;    this.innerhtml = index;    if (index = = 1) {        Test.removeeventlistener ("Webkittransitionend", myFunction);        Test.removeeventlistener ("Transitionend", myFunction);    }}