CSS 3 learning--transition Transitions

The following are organized according to the official translation and their own understanding.

1. Introduction

This document describes the new CSS features that enable implicit transitions. The new CSS feature described in the documentation describes how the value of a CSS property changes smoothly from one value to another within a given Time.

2. Transition transitions

typically, when a CSS property changes, the CSS property value of the corresponding element is immediately changed from the old value to the new value, and the render result is updated immediately. This section describes a method that you can use to specify the transition process by using the new CSS Properties. These new properties let elements gradually transition from the old state to the new state in a smooth Animation.

For example, Suppose that the left property and the Background-color property of an element are set to a transition of 1s: the position is the right and the background color from red to blue (the Other transition parameters are the default values). The following diagram shows the transition process for this Element.

left and the transition of Background-color

Transitions are a visual effect. The value of the property that is set to transition gradually changes from the old value to the new value, so if a script queries the attribute value of an element that is in transition, it will get an intermediate value that represents the current animation State.

Only animated CSS properties can be set for transitions, depending on the properties from css, to see which attributes are animated Properties.

To set a transition to a property, use several new CSS Properties. Like what:

Example 1

{  transition-property: opacity;   transition-duration: 2s;}

The above example defines a transition (transition) on the opacity Attribute. If a new value is assigned to opacity, the old value is gradually changed to a new value for two SECONDS.

Each sub-attribute of transition can specify a comma-separated list of values that allows the transition of multiple attributes to be specified, with each transition corresponding to a different Property. In the following example, each transition matches the parameters in the order in which they are in the List.

Example 2

{  transition-property: opacity,left;   transition-duration: 2s, 4s;}

In this example, the transition time for the Opacity property corresponds to a transition time of 4s for the 2s,left Property.

In the following example, the value list of the Transition's sub-attributes is not the same length. When the transition (transitions) begins, the list length of the Transition-property property determines the number of entries for the list of values for other Sub-properties. The match for a value list starts with the first value and the last extra value is Ignored. If a comma-separated value with a sub-attribute is not sufficient to match the value list of the Transition-property property, the user agent must repeat the value list of the Sub-attribute so that his list of values is sufficient to match the value list of the Transition-property Property. Truncation or repetition of these values does not affect the calculation of the final Value. Note: This is similar to the related property of the background style, and the Transition-property property is similar to the Background-image Property.

Example 3

{  transition-property: opacity, left, top, width;   transition-duration: 2s, 1s;}

The example above defines the duration of the opacity attribute transition to the duration of the 2s;left attribute transition to the duration of the 1s;top attribute transition to the duration of the 2s;width attribute transition to 1s.

Note: developers can use transitions to create dynamically changing content, while dynamically changing content can lead to seizures for certain users.

2.1. Transition-property Properties

Value: None | <single-transition-property> #;

where <single-transition-property> = All | <custom-ident>;

Default Value: All

Non-inheritable

Applies to: all elements,:: before and:: after pseudo Elements.

None

Indicates that a useless property is transitioning

All

Indicates that all animated properties exhibit a transition animation.

If the Transition-property value list has an identifier that is not a recognizable property name or is not an animated (animatable) property, the browser must still be implemented from the Transition-duration property, The first entry of the Transition-delay property and the value list of the Transition-timing-function property begins to Match. That is, unrecognized property names or non-animated properties must still occupy their position in the value list item to participate in the matching of the Values.

Example 4

{  transition-property: opacity, nothing, width;   transition-duration: 2s, 3s, 4s;}

In this example, the Opacity property matches to 2s;nothing is an unrecognized property name, and still matches to 3s;width match to 4s.

<single-transition-property> generated <custom-ident> to exclude the keyword "none", also to exclude other illegal keywords. That is, the keyword "none", "inherit", "initial" is not allowed to appear in the list of values, the list of values using the above keyword will be syntactically invalid (invalid syntax, that is, the entire transition-property is Invalid.) invalid, The browser uses the default value of All. Other sub-attributes are the same).

For the keyword "all" or shorthand shorthand attribute, The browser must add a transition to all the animated sub-attributes of the shorthand property when implemented, match the transition-duration,transition-delay, and The transition-timing-function parameter is matched using shorthand shorthand attributes.

If a property is specified more than once in the Transition-property property (either with its own property name or with the "all" keyword, or with the shorthand attribute containing it), Then the transition is made using the parameter it matches to in the last position in the Transition-property value List.

Note: The All keyword works in a similar way to shorthand shorthand attributes, so the ALL keyword can be considered shorthand for all animated Properties.

2.2. Transition-duration Properties

The Transition-duration property defines how long the transition takes (the transition time).

Value: <time> #

In S or Ms Units.

default value: 0s

Non-inheritable

Applies to: all elements,:: before and:: after pseudo elements

This property specifies the time it takes for the transition to change from the old value to the new Value. The default value is "0s", which means

The old value immediately changes to a new value without an animated Effect. If it is negative, the entire transition-duration is invalid and the default value is Used.

2.3. Transition-timing-function Properties

The Transition-timing-function property describes how intermediate values are calculated during a Transition. It allows you to change the speed of transitions during transitions, which are called easing functions. In either case, a mathematical function that can provide a smooth curve can be used.

Timing functions can be specified as stepping function (stepping Functions) or cubic Bézier curve (three Bezier curves). The specified timing function takes as his input a percentage of the current elapsed transition time, outputting the percentage from the start value to the end Value. As for how to use this output, see interpolation Rules.

The stepping function divides the scope (transition Time) into intervals of the same size with a number (equivalent to the total number of steps or intervals divided). Each passing interval is an equal step forward to the final target State. This function can also specify whether the variation of the output percentage occurs at the beginning of the interval or at the end of the interval (in other words, if 0% on the input percentage was the point of the initial change, I really do not understand this What is the meaning of the sentence?

My understanding: start indicates that the state (keyframe) of the interval end point is inserted at the interval start point (the value immediately changes to the value corresponding to the interval end point); end indicates that the state of the interval end point (keyframe) appears where he should have Been. So start occurs immediately and end delays an interval of Time.

Step Timing Functions

A three-time Bezier curve is defined by 4 control points: P0,P1,P2,P3 (for example). P0 and P3 are usually set to (0,0) and (). The Transition-timing-function property can be used to specify values for points P1 and P2. You can use a preset keyword (listed later), or you can also use the Cubic-bezier () Function. In the Cubic-bezier () function, both P1 and P2 are specified with an X value and a Y Value.

Bézier Timing Function Control Points

Transition-timing-function Property

Value:<single-transition-timing-function> #;

<single-transition-timing-function> = Ease | Linear | ease-in | Ease-out | Ease-in-out | Step-start | Step-end | Steps (<integer>[, [start | end]]?) | Cubic-bezier (<number>, <number>, <number>, <number>)

Default Value: Ease

Applies to: all elements,:: before and:: after pseudo elements

Timing functions can be defined with the following values:

Key Words:

Ease

A bit similar to ease-in-out, the initial speed increased sharply, to close to the middle point when the speed began to decrease, equivalent to Cubic-bezier (0.25, 0.1, 0.25, 1).

Linear

The transition from the starting state to the final state at a constant speed is equivalent to cubic-bezier (0, 0, 1, 1).

Ease-in

The transition is slow at first, and then gradually accelerates until it reaches its final state, and the animation immediately stops at the equivalent of Cubic-bezier (0.42, 0, 1, 1).

Ease-out

The transition animation starts fast and then slows down gradually until it transitions to its final state, equivalent to cubic-bezier (0, 0, 0.58, 1).

Ease-in-out

From the beginning to the middle point is similar to ease-in, from the middle point to the final state similar to ease-out, equivalent to Cubic-bezier (0.42, 0, 0.58, 1).

Step-start

Equivalent to steps (1, start). With this value, the element immediately jumps from the start state to the final state, and then stays in the final state for the transition-duration set Time.

Step-end

Equivalent to steps (1, end). With this value, the element stays in its initial state for the transition-duration set time, and then jumps directly to the final State.

Function:

Steps ()

Syntax: Steps (number_of_steps, Direction)

Numbers of steps must be a positive integer greater than 0, representing the number of steps or intervals of the Divide.

Direction can take one of the "start" or "end" to indicate which point in the interval the change in value takes Place. If omitted, it is treated as "end".

Cubic-bezier ()

Syntax: cubic-bezier (<number>, <number>, <number>, <number>)

Specifies a three-time Bezier Curve. The first two values are the horizontal and vertical coordinates of the point P1, and the latter two values are the horizontal and vertical coordinates of the point P2 (x1,y1, x2,y2). The horizontal axis must be otherwise invalid within the [0, 1] interval, and the ordinate can exceed this range. If you specify an invalid three-time Bezier curve, The entire Transition-timing-function property is invalid and the browser uses the default Value.

2.3.1. Serialization of timing function

Serialize the timing function using the commonly used serialization mode defined in [CSSOM], plus the following requirements:

• Before serialization, ease, linear, ease-in, ease-out, and ease-in-out These key values are not converted to equivalent cubic-bezier () functions.
• The step time function (step timing functions), Whether steps () or keyword Step-start or step-end, is serialized according to the following rules:

1. If the value change occurs at the end point (equivalent to the second argument of the steps () function as end), serialize by steps (<integer>)
2. otherwise, Serialize according to steps (<integer> start).

2.4. Transition-delay Properties

The Transition-delay property defines when the transition begins. When a transition is applied, this property allows you to specify the time (that is, the delay Time) to wait before the transition begins. If the value is 0s, the transition animation begins as soon as the value of the property that is assigned the transition effect Changes. otherwise, when the value of the property that is assigned the transition effect changes, the transition animation will delay the specified time before it starts.

If the value of the Transition-delay property is negative, The transition animation begins as soon as the value of the property that is assigned the transition effect Changes.

Transition-delay

Desirable value:<time> #, Unit s or MS

Applies to: all elements,:: before and:: after pseudo elements

default value: 0s

Cannot be Inherited.

Example 5 Transition-delay is a negative case here to see the online demo.

When the Transition-delay is negative, the transition is implemented:

When the absolute value of transition-delay is greater than or equal to transition-duration, there is no transition animation effect. When a transition is triggered, it changes from the start state to the end state immediately.

When the absolute value of transition-delay is less than the value of transition-duration, there is a transition animation effect. When a transition is triggered, the browser thinks that the transition animation has passed the absolute value of the transition-delay, and the transition actually takes transition-duration-(-transition-delay) time from the middle state to the end state, See example 5 in the case of Transition-delay as -1s.

2.5.transition Properties

The Transition property is a shorthand property of the 4 properties described earlier.

Desirable Value: <single-transition> #

<single-transition> = [none | <single-transition-property>] | | <time> | | <single-transition-timing-function> | | <time>

That is, Transition-property + transition-duration + transition-timing-finction + transition-delay, The middle is separated by a space, omitting the default value of the Take-apart Attribute. If you specify a transition effect for multiple properties, the transition effect for different property values is separated by Commas.

Default Value: See the previous 4 Sub-attributes.

Cannot be Inherited.

Applies to: all elements,:: before and:: after pseudo elements

When you use the Transition property to specify the transition effect of an animated property, if there is a value of none in the value list that represents the Transition-property property, the entire transition declaration will be invalid, and the browser instead uses the default value of All.

3. The beginning of the transition

Browsers (implementations, Hereinafter) must maintain a collection of in- progress Transitions (running TRANSITIONS) When implementing transitions that are applied to specific elements and their Non-shorthand Properties. Each of these transitions has its own start time , the end time , the start value , the end value , The return adjustment starts with the value (reversing-adjusted start value), and the return shortening factor (reversing shortening factor). The browser adds the parameters for each of these columns to each transition as described in that section when implementing the transition, and removes the series of parameters when the transition is over-completed or canceled. For the rollback adjustment the start value (reversing-adjusted start value), and the return shortening factor (reversing shortening factor).

The browser must of course also have to maintain a set of completed transitions (completed transitions). Like running transitions, completed transitions is also applied to specific elements and their Non-shorthand Properties. This specification declares that for the same element and the same attribute, there will never be one running transition and one completed transition at the same time.

If an element no longer exists in document, the browser must remove all running transitions applied to the element, and it must also be removed from the collection of completed Transitions.

In order to prevent repeated transitions in certain situations, a collection of completed transitions needs to be maintained. This specification also declares that changes to unrelated styles do not trigger Transitions.

Example 6 Inheritance of transition effects

In this example, an inheritable property is assigned a transition, and themaintenance of the completed Transitions collection is Necessary. The parent element specifies a transition for a longer duration on a property (for example:transition:4s text-indent;) and the value of this property of the child element is inherited from the parent element, and the child element specifies a transition for a shorter duration on this attribute (for example: Transition:1s text-indent;).

If a transition is set on an inheritable property of a descendant element, the transition that is set on the descendant element is also triggered if the value of the attribute is changed by the ancestor Element.

If a descendant element transition completes before the transition of the ancestor element, then the descendant element will restart inheriting the corresponding property value from his parent element (continuation transition). This effect may not be the desired effect, but it is necessary for the Developer's Requirements. (the result of my test is that this is the effect in firefox, not in Chrome.) In chrome, the first ancestor element reaches the final state, and the transition of the descendant elements Begins.

1 p{2 border:1px Solid black;3 transition:4s text-indent;4 }5 p:hover{6 text-indent:50px;7 }8 quote{9 display:block;Ten transition:1s text-indent; one } a quote:hover{ - text-indent:inherit;  - } the <P> -     maintain that unrelated style changes does not trigger Transitions. -     <Quote>This set of completed transitions needs to be maintained.</Quote> - </P>

Specific effect points Here.

The following paragraph does not understand.

Many things can cause a change in the computed value of an element's attributes, including removing and inserting elements from the document tree, changing the element that the selector matches to by the document tree, modifying the style sheet or style attributes, and some other things. This specification does not define when the calculated value is updated, except that the browser is not used, renders or displays CSS cascading, value computation, and inheritance process that are not updated with calculated Values. (this means that the browser inevitably encounters the case of changing the non-computed value that the specification claims to be treated as part of a style change.) however, when the browser updates the computed value of an Element's properties in order to reflect these changes, or calculates the computed value of the property of the element newly added to the document, the browser must update all the elements and the computed values of all the attributes at the same time to reflect these changes (or at least, Although the browser updates these changes at different times, however, users are unaware that these updates are not occurring at the same time, but rather let the user feel that these updates occur at the same time. The process of synchronizing changes in a set of styles is called a style change Event. Browsers usually have a style change event that matches the screen refresh rate they require. At the same time, a timely update of the calculation style or layout information is necessary for scripting APIs that depend on This.

Because the specification does not specify when the style change event occurs, any changes to the computed value are considered synchronous. Developers should be aware that, after the calculated value changes, different browsers will change the value of the transition attribute, and some browsers think the changes are synchronous, while others do Not.

When a style change event occurs, The browser must begin the transition based on the changes in the computed value in this Event. If there is an element that is not in the document during or before the style change event, the transition for this element of the style change event will not begin. In addition, the Before-change style is defined as the computed value (computed values) of all properties of the elements of the previous style change event, except for the styles derived from the declarative animation (animations), such as CSS transitions, CSS animations ([css3-animations]), and SMIL animations ([smil-animation], [SVG11]), These styles are updated in real time (updated To the current time). similarly, the After-change style is defined as the computed value of all the attributes of the element at the start of the style change event, except for the calculated style derived from the CSS transitions and the After-change style that inherits from the parent Element.

For each element that has Before-change style and After-change style, and for each attribute of the element (non-shorthand property), the matching is defined Transition-property Value is the final value of Transition-property in the after-change style of this element (the final value is, of course, calculated as described in section 2.1). In a consistent manner, define matching transition duration,matching transition delay, and matching transition timing The function acts as the final value of the element in the After-change style transition-duration,transition-delay, and Transition-timing-function. Defines the transition of the combined duration as Max (matching transition duration, 0s) and matching transition delay. For each element and attribute, the browser must execute according to the following rules:

See Specification: Https://drafts.csswg.org/css-transitions/#matching-transition-duration

Note: when a computed value (computed Value) of an animated property is changed, the transition is based on transition-property,transition-duration, The Transition-timing-function and Transition-delay properties are currently the most recent calculated value to begin With. This means that when the value of a property that specifies a transition effect changes, and its corresponding transition-* property is changed, the transition effect of the property is controlled by the current value of the latest transition-* Property.

This allows the developer to specify different transition-* attribute values for each transition in two different states (forward: forward and Rollback: reverse). Developers can specify additional values for the Transition-property,transition-duration,transition-timing-function and Transition-delay properties while triggering transitions. Because the current up-to-date value of the Transition-* property controls the transition, the value of the newly specified transition-* after the triggering transition overrides the value that triggered the pre-transition transition-* control Transition.

The above two paragraphs say a meaning.

Example 7

{  transition: background-color linear 1s;   background: Blue;}  {  background-color: green;   Transition-duration: 2s/**/}

In the example above, the background color turns green when the list item enters hover state, and the value of Transition-duration becomes 2s, so the background color of the list item transitions from blue to green using 2s instead of 1s; when the list item resumes from hover to its original state, The value of the transition-duration becomes 1s, so the background color transitions from green to blue using 1s instead of 2s.

I'll See the Demo.

Attention:

Once a property begins the transition (including the time of entry delay), its transition is still based on the original timing function,duration and delay, even before the transition is complete transition-timing-function, The value of the Transition-duration or Transition-delay property is modified (note that this is not the case in the previous example, the timing function,duration and delay in the previous example are modified synchronously, and this is a deferred modification). See Example 8 in the demo above

however, if the value of Transition-property is modified, the transition of the property that originally specified the transition effect stops immediately, and its value immediately becomes the final Value. See Example 9 in the demo above

Note: the above rules imply that a change in thecomputed value of a property caused by a declarative animation (declarative animation, In contrast to scripted animation (scripted Animation) does not trigger a Transition. Because for declarative animations, thebefore-change style contains the up-to-date style.

3.1. Quick-return Transitions

For transitions, the interpolation changes the value of the property before he finishes, resetting the start value of the Transition. For example, when the mouse pointer hovers over an element, the transition effect of the element begins, and then the mouse pointer exits from the element before the transition is Complete. If you move the mouse out and move in the transition using the original specified durations and timing functions, then the final transition will be the effect of the confusion, because the second transition uses the complete duration to move a shortened distance. As an alternative, the canonical declaration allows the second transition to be shortened accordingly.

The mechanisms in the above rules are used to cause the reversing shortening factor and reversing-adjusted start value to move back into the Transition. In particular, the reversing shortening factor is less than 1 when the return Phase.

4. Transition Events

The creation, start, completion, and cancellation of transitions produce corresponding Dom Events. For an element that specifies a transition effect, the attribute is actually a sub-property of the attribute that triggered the transition event. For example, The Border-width property specifies that the border width of the element transitions from 0px to 20px, then border-top-width,border-right-width, Border-bottom-width and Border-left-width both trigger transition events. The forward stage can trigger a transition event, and the return phase can also trigger a transition event.

4.1. 过渡事件接口4.1.1. Transition Event Properties

PropertyName

read-only, string type, Returns the name of the CSS property that is bound to the Transition.

ElapsedTime

read-only, floating-point number, which returns the elapsed time after the transition has been triggered, including the delay time, in units S.

Pseudoelement

read-only, string type, Returns the name of the CSS pseudo-element that is transitioning (in this case, the object target of the event is the element corresponding to the Pseudo-element) or an empty string (that is, the element that is transitioning is not a pseudo-element).

Transitionevent (type, Transitioneventinitdict)

is an event constructor that creates a transition event with the given Parameters. See the MDN for Details.

4.2. 过渡事件的类型

Transitionrun

There is currently no browser support for this Event.

Triggered when a transition is created (or triggered when the transition is added to the running Transitions collection).

For transitionrun, if the Transition-delay value is negative, the ElapsedTime property return value equals: min (max (-transition-delay, 0), transition-duration).

Transitionstart

Only ie10+ supports this event at this Time.

triggered when the delay time has gone through.

The value returned for Transitionstart,elapsedtime is the same as Transitionrun.

Transitionend

This event is supported by all modern Browsers.

Triggered when the transition is Complete. If the transition is removed before the transition is complete, such as Transition-property is removed, the transitionend is not triggered.

For transitionend,elapsedtime, the value returned is equal to the value of Transition-duration.

If the transition delay time is negative and the absolute value is greater than or equal to the transition duration, no transition occurs and no transition event is triggered

Transitioncancel

There is currently no browser support for this Event.

Triggered when the transition is Canceled.

The number of seconds that Transitioncancel,elapsedtime returns the end of the transition delay to the time the transition is Canceled.

If the value of Transition-delay is negative, the beginning of the transition is equal to the number of seconds transition-delay the absolute value before the transition really triggers the Moment.

If the value of Transition-delay is positive and transitioncancel is triggered before the end of the transition delay time, its elapsedtime returns 0.

The transition event is added through the Dom's addeventlistener () method.

Point me to view demo.

References and related articles:

1. Standard text

2. In-depth understanding of CSS transition Transition

3. CSS3 Transition's only event: transitionend

4. MDN

CSS 3 learning--transition Transitions