CSS Transitions In-depth Understanding

in the end what CSS transition is, Let's look at the explanation:

CSS transitions changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes To the element (including even a change on the element ' s class attribute).

CSS transition allows changes in CSS property values to be completed smoothly over a period of time, and the speed of change can be specified by corresponding Functions. This smooth display of CSS value changes can be triggered by a lot of events, such as mouse clicks, focus,hover and so On.

{  padding: 5px 10px;   background: #9c3;   -webkit-transition-property: background;   -webkit-transition-duration: 0.3s;   -webkit-transition-timing-function: ease;  }  {  background: #690;  }

From the code above, we can see several properties related to Transition:

transition-property: Specifies which property value is changed to perform the corresponding transition animation process;

Transition-duration: This transition animation from start to finish time paragraph

transition-timing-function: specifies how fast the transition changes through the timeline (ease, linear, ease-in, ease-out,ease-in-out, cubic-bezier)

List of all CSS properties that can be transtion:

Background-color	As color
Background-position	As repeatable list of simple list of length, percentage, or Calc
Border-bottom-color	As color
Border-bottom-width	As length
Border-left-color	As color
Border-left-width	As length
Border-right-color	As color
Border-right-width	As length
Border-spacing	As simple list of length
Border-top-color	As color
Border-top-width	As length
Bottom	As length, percentage, or Calc
Clip	As Rectangle
Color	As color
Font-size	As length
Font-weight	As font weight
Height	As length, percentage, or Calc
Left	As length, percentage, or Calc
Letter-spacing	As length
Line-height	As either number or length
Margin-bottom	As length
Margin-left	As length
Margin-right	As length
Margin-top	As length
Max-height	As length, percentage, or Calc
Max-width	As length, percentage, or Calc
Min-height	As length, percentage, or Calc
Min-width	As length, percentage, or Calc
Opacity	As number
Outline-color	As color
Outline-width	As length
Padding-bottom	As length
Padding-left	As length
Padding-right	As length
Padding-top	As length
Right	As length, percentage, or Calc
Text-indent	As length, percentage, or Calc
Text-shadow	As Shadow List
Top	As length, percentage, or Calc
Vertical-align	As length
Visibility	As visibility
Width	As length, percentage, or Calc
Word-spacing	As length
Z-index	As Integer

Trigger transition by dynamically adding class to the program

In the example above, we do this by setting the transition property in the element class and setting the property value of the change in sudo class. sometimes, We need not only sudo class to achieve transition trigger, what is the method?

In this case, we can dynamically add or remove class from JavaScript to implement the transition trigger:

/*CSS*/. Element{Opacity:0.0;Transform:scale (0.95) Translate3d (0,100%,0);transition:transform 400ms ease, opacity 400ms ease;}. Element.active{Opacity:1.0;Transform:scale (1.0) Translate3d (0,0,0);}. Element.inactive{Opacity:0.0;Transform:scale (1) Translate3d (0,0,0);}//JS with Jqueryvar active = function (){$ ('. Element '). removeclass (' inactive '). addclass (' active ');}; var inactive = function (){$ ('. Element '). removeclass (' active '). addclass (' inactive ');};

Looking at the code above, we'll get two different transitions, the element slide up when activated, and fade out when Deactivated. all JavaScript does is switch two classes: Active and inactive

Hardware acceleration

Transition some properties, such as left, margin will allow the browser to recalculate styles at each frame, which is very expensive and will result in unnecessary re-paints, especially if there are so many elements on the Screen. One possible scenario is to use the GPU.

Transform:translate3d (0,0,0);

CSS Transitions In-depth Understanding