Today, I wanted to see the CSS official website on a sudden idea. When I saw CSS transitions, I remembered that what I was least familiar with in school was animation, so I decided to look at transition and Transform. After all, I have never been familiar with these two aspects.

transition

In transition toA given amount of timeChange property values smoothly), so transition isThere's a time period.

There is no transition effect if there is no duration.

Let’s take a look at how well this property is supported by each browser

Here’s my detailed example:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s , height 4s;
}

div:hover {
  width: 300px;
  height:300px;
}
Copy the code

I initially set a div, 100px by 100px, and then, when I mouse over the div, make it 300px wide for 2 seconds and 300px high for 4 seconds. When I mouse away from the div, The div will revert to its original look, even if it doesn’t change to what you want it to (if you hover for a short time).

The transition-delay property specifies the delay in seconds for the transition effect.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-delay : 2s;
}

div:hover {
  width: 300px;
}
Copy the code

The code above is roughly same, but careful people will find that more than a transition – delay, the only difference is that with the above when the mouse on it, I will delay 2 s, in the transition effect, but the delay two seconds, the process of transition, the mouse left suddenly, also will not be the way you want, will transition back to

Transition-timing-function Speed curve of transition

  • ease, start slowly, then speed up, then finish slowly (default)
  • linear, providing the same speed of transition from start to finish
  • ease-in, prescribing the transition effect of a slow start
  • ease-outTo provide a slow end to the transition effect
  • ease-in-out, stipulate the start and end of a slower transition effect

transition-duration [du ˈ re ɪ ʃ n]Time needed to complete the transition effect (unit: ms/s)

The default value is 0 and has no transition effect

Transition-property Specifies the name of the CSS property to which the transition effect is appliedTransitions typically occur when the user floats the mouse pointer over an element

Transition-property has three properties: None,all, and property

  • Transition-property: None None of the properties get the transition effect.
  • Transition-property: all All properties get the transition effect
  • Transition-property: Property A list of CSS property names to which the transition effect applies, separated by commas

transform

Transform is used to transform between 2D and 3D, of course we can also rotate, scale, move or tilt.