Transition (animation properties)

CSS Transitions (transition) are a mechanism of motion tweens that enable elements to smoothly transition or change within a certain time interval by defining the state of the origin and the end point of the element. You can make the property change process last for a period of time, rather than taking effect immediately.

With transition you can decide which properties are animated (by explicitly listing these properties), when to start the animation (by setting delay), how long the animation lasts (by setting the duration), and how to animate (by defining the timing function, For example, linear or start fast end slow).

How to define transition (transitions)

The transition also contains four sub-attributes, respectively:

• Transition-property, change the time of the continuation.
• Transition-duration, in the duration of the continuation period.
• Transition-timing-function, the rate change of the transformation.
• Transition-delay: Transform delay time.

The definition is also very flexible, first introduce these 4 sub-attributes:

Transition-property (transition property)

1. You can specify which attributes of an element are changed when performing a transition (transition), which can trigger the properties of the browser reflow or repaint those CSS properties can be animated.
2. You can specify all that the transition (transition) effect will be performed when any of the transition property values of an element change.
3. The none animation stops immediately when it can be specified.
4. The initial default value isall。

Grammar:

1. Transition-property: none | | [ <IDENT> ] [, <IDENT> ]*

For example:

2. Transition-property: all;
4. Transition-property: none;
6. Transition-property: background-color;
8. Transition-property: background-color, height, width;

transition-duration(transition duration)

1. Used to specify the duration, time value, 1s (seconds), 4000ms (milliseconds) of the element's excessive process.
2. The default value is 0s, or it can be understood as a no transition (transition) effect.

Grammar:

1. Transition-duration: <time> [, <time>]*

For example:

1. Transition-duration: 2s;
2. Transition-duration: 4000ms;
3. Transition-duration: 1s, 800ms;

transition-timing-function (transition time function)

Specifies the conversion rate of CSS properties, which are preset: ease, linear, ease-in, Ease-out, Ease-in-out, Cubic-bezier (x1, y1, x2, y2), and the default value is easy:

1. ease: (gradually slows) the default value, equivalent to Bezier curves (0.25, 0.1, 0.25, 1.0).
2. linear: (constant speed), equal to Bezier curve (0.0, 0.0, 1.0, 1.0).
3. ease-in: (Accelerated), equivalent to Bezier curves (0.42, 0, 1.0, 1.0).
4. ease-out: (deceleration), equivalent to Bezier curve (0, 0, 0.58, 1.0).
5. ease-in-out: (Acceleration and deceleration), equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
6. cubic-bezier to calculate the value of the attribute in the "transform" process through Bezier curves, as shown in the following curve, the output P2 of the entire process can be changed by changing the coordinates of the P1 (x1, y1) and X2 (y2, Percentage). It is stated in the worldwide document that all values need to be in the [0, 1] area, otherwise it is invalid. However, in some browsers (CHROME,FIREFOX,OPERA,IE11 preview) The P1 (x1, y1) and P2 (x2, y2) in the coordinates of Y1 and Y2 do not have this limit, the curve can be negative, you can also take a value greater than 1. If X1 and X2 are negative, or if the value is greater than 1, then applying the final style directly does not have a transition effect. Some older versions of the browser curve value still need to be in the [0, 1] area, otherwise directly apply the final style, such as opera 12, and the old version of the WebKit browser, the other is not tested.
   

Transition-delay (Transition delay function)

Specifies the time at which an animation starts executing, that is, how long it takes to start the transition effect after changing the attribute value of an element, with an initial default value of 0;
Grammar:

1. Transition-delay: <time> [, <time>]*

For example:

1. Transition-delay: 5s;
2. Transition-delay: 4000ms, 8000ms;
3. Transition-delay: -5s;

Shorthand for transition

The transition can be abbreviated.

Grammar:

2. Transition: <transition> [, <transition>]*
4. <transition> = <transition-Property> <transition -Duration> <transition-timing-function> <transition-delay>

For example:

2. Transition: background-color 3s linear 1s;
4. transition:width 2s Ease-in 2000msborder 2s Linear,5s, Background- Color 2s, Transform 2s
6. Transition: 4s ease-in-out;
8. Transition: 5s;

Other cases: When the property value list length is inconsistent

The transition-property Value list length is standard, and if a property value list is shorter than its length, the repeating value is consistent in length, for example:

1. Div {
2. Transition-property: opacity, left, top, height;
3. Transition-duration: 3s, 5s;
4. }

This will be handled as follows:

2. Div {
4. Transition-property: opacity, left, top, height;
6. Transition-duration: 3s, 5s, 3s, 5s;
8. }

Similarly, if the value list of an attribute is longer than that transition-property , it will be truncated. For example:

1. div {
2. Transition-: Opacity, Left
3. Transition-: 3s, 5s, 2s, Span class= "lit" >1s;
4. }

This will be handled as follows:

1. Div {
2. Transition-property: opacity, left;
3. Transition-duration: 3s, 5s;
4. }

How do I perform an animation effect?

CSS3 animations are typically defined by mouse events or mouse states, and we can usually use pseudo-classes in CSS, style attributes with JS to modify elements, or append delete styles to perform defined animations. pseudo-class execution animations in CSS include:

Dynamic Pseudo-Class	Elements that work	Describe
: Link	Only links	Non-visited links
: Visited	Only links	Links that have been visited
: hover	All elements	Mouse over elements
: Active	All elements	Mouse click Element
: Focus	All elements that can be selected	Element is selected

The example above is using pseudo-classes in CSS to perform animations. use JS to modify the element's style attributes or append delete style to perform animations: typically mouse event actions and timed actions (Window.settimeout (), Window.setinterval ());

It should also be noted that when an element uses a transition (transition), it is immediately used to add .appendChild() it to the DOM or remove it display: none; . This is considered if the initial state has never existed before so the element is always in its final state. The simplest way to overcome this limitation is to use a very small number of millimeterswindow.setTimeout()。

About: Transitionend Events

transitionendThe event is triggered when the CSS transition transition is complete. This event will not be triggered when transition is removed or canceled before completion, such as removing properties from CSS transition-property . Support for events under the browser.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
1.0 Start webkitTransitionEnd	4.0 (2.0) Start transitionend	10 Start transitionend	10.5 Start oTransitionEnd12 Start otransitionend 12.10 Start transitionend	3.2 Start webkitTransitionEnd

transitionendThe event is triggered when each transition property is completed, and there are inconsistencies under the browser, such as when the border transitions, the webkit is triggered only once, and the output:

Transition properties: Border; Time: 2

and Firefox output:

Transition properties: Border-left-color; Time: 2
Transition properties: Border-bottom-color; Time: 2
Transition properties: Border-right-color; Time: 2
Transition properties: Border-top-color; Time: 2
Transition properties: Border-left-width; Time: 2
Transition properties: Border-bottom-width; Time: 2
Transition properties: Border-right-width; Time: 2
Transition properties: Border-top-width; Time: 2

It is recommended to use this to determine whether all properties have been transitioned or to determine the specific property name in which the event was performed.

The difference between transition and animation:

1. After the transition is complete, the transition state is preserved, and animation jumps to the default state
2. The latter is more granular and can be controlled by every single one, while the former is a smooth transition.

Transition (animation properties)