Re-think, re-see--CSS3 deformation, transition and animation ③

This article mainly talks about the transition properties of CSS3.

Transition properties are designed to be very easy to understand, the attribute is transition, there are four sub-attributes:

1. <transition-property> represents a property that needs to be transitioned "must" (essentially, transition adds a listener to the attribute on the element, and once the property value changes, the ' transition ' switch is turned on to make the value of the property begin the transition. There are three types of values below:
   1. None
   2. All indicates that all the transitive properties of the element are monitored;
   3. <single-transition-property> a single attribute to listen on (if you want to listen to multiple attributes, you need to separate them with commas);
2. <transition-duration> Indicates the time required for the entire transition to be, in s (seconds).
3. <transition-timing-function> This sub-attribute determines the rate at which the element transitions, usually with the following values:
   1. Ease default value, fast to slow, gradually slow;
   2. Linear uniform;
   3. Ease-in speed gradually (acceleration effect/fade effect);
   4. Ease-out speed gradually slows down (deceleration effect/fade effect);
   5. Ease-in-out speed accelerates and decelerates first.
4. <transition-delay> Determines the delay time for the transition attribute, which must be placed after the second child attribute.

Of course, CSS3 provides a shorthand way for transition, for example: transition:background 1s; it's one of the most common ways.

Let's talk about the triggering of transition, just as the idea of "listener" mentioned earlier, we're actually talking about several ways to change the value of an element's CSS property:

1. using pseudo-class through : Pseudo-classes such as hover trigger the gradient in the moment the event satisfies;
2. Media query triggering is triggered according to the @media mode;
3. JavaScript triggers direct changes to CSS values, adding class tags, and so on.

The above basically clear the use and principle of the transition attribute, but this is still far from enough, the transition attribute has left the following three questions, we will discuss each:

1. Browser support : Transition Properties The current level of Internet Explorer support is not very good, and IE10 does not support this property. The latest versions of other browsers do not need to add browser private properties;
2. transitive Properties : Not all element attributes can be transitioned using the CSS3 transition attribute (such as color properties), and what properties can be transitioned can be referred to the website;
3. Other Practical questions : such as how to use JS to manipulate transition properties? Priority issues for transition attributes, implicit transitions, and so on, are all added in the future when actually encountered.

Re-think, re-see--CSS3 deformation, transition and animation ③