A detailed description of the transition attribute transition in the CSS3 element

Transition animations are the basis of animations

Before you learn animation properties
We need to understand the transition properties first transition

Transition transition

Let's start with a small example.

<p class= "Demo" ></p>

. demo {    width:100px;    height:100px;    Background-color:royalblue;}. demo:hover {    width:200px;}

So when my cursor hovers over the demo for a moment
Its width becomes 200px.

Is there a way to let our cursor hover over the element, the width of the element is slowly widening?
We can only use the troublesome JS script before CSS3.
But now we just need to add a property
We can achieve our goal.

. demo {    width:100px;    height:100px;    Background-color:royalblue;    Transition:width 1s; /* Add */}.demo:hover {    width:200px;}

Transition its role is to specify when certain styles of your element change
These styles can gradually transition to the final attribute value

It is a composite property
Has the following sub-properties

• Transition-property: Specifying CSS properties for staging or dynamic impersonation

• Transition-duration: Specify the time required for the transition

• Transition-timing-function: Specifying a transition function

• Transition-delay: Specify the delay time to start appearing

Transition-property What kind of property we want to write the attribute transition to
or simply write the transition all attributes keyword all

Transition-duration Gradient Time attribute value is "digital +s"
Represents a transition within seconds

Transition-timing-function is an optional property value, like the following optional value

• Linear
  Linear transition, equivalent Bezier curve (0.0, 0.0, 1.0, 1.0)

• Ease (default)
  Smooth transition, equivalent Bezier curve (0.25, 0.1, 0.25, 1.0)

• Ease-in
  From slow to fast, equivalent Bezier curve (0.42, 0, 1.0, 1.0)

• Ease-out
  From fast to slow, equivalent Bezier curve (0, 0, 0.58, 1.0)

• Ease-in-out
  From slow to fast to slow, equivalent Bezier curve (0.42, 0, 0.58, 1.0)

• Step-start
  Equivalent steps (1, start)

• Step-end
  Equivalent steps (1, end)

• Steps ():
  Step function for two parameters. The first parameter is a positive integer that specifies the function step number. The second parameter value is start or end, specifying the point in time at which the value of each step changes. The second parameter is optional, and the default value is end.

• Cubic-bezier (num, num, num, num):
  Specific Bezier type, 4 values in the [0, 1] Range

Most of us are not used, the most common is probably our default ease and linear transition linear

Transition-delay is also an optional attribute value
If you want to delay the transition, in other words, if we want to stop for a little while before the transition,
So, at the end of this composite property, add the time we need to delay "digital +s"

This property can be set for several different properties
All we have to do is use commas to separate

. demo {    width:100px;    height:100px;    Background-color:royalblue;    Transition:width 1s linear,                 height 1s linear,                background-color 2s 1s;/* change */}.demo:hover {    width:200px;    height:200px;    Background-color:lawngreen; /* Change */}

When the mouse moves out of the element, the element transitions back

Another reason to use a staging property instead of a script is that
Scripting methods changing multiple element styles can create conflicts
The solution is to lock with a bool variable, or it's a hassle.
Our transition transition attributes don't have to be considered so much.
Elements and elements do not affect each other

It is also important to note that element transitions need to know the style specific starting and ending properties
For example, the width of our example is defined by the transition from 100px to 200px.

. demo:hover {    Width:auto;/* Change */    height:200px;    Background-color:lawngreen; /* Change */}

Changed the hover style width to auto
We find that when the cursor hovers over the element
The Width property does not have a transition

Attributes that participate in transitions

Of course, not all styles can be transitioned.
For example, you want display:block the transition to display:inline-block
That's impossible.
The following properties are involved in the transition

• Color

• Visibility

• Opacity

• Vertical-align

• Z-index

• Clip

• Width/height

• Top/bottom/left/right

• Background-color/position

• Border-top/bottom/left/right-color/width

• Border/letter/word-spacing

• Font-size/weight

• Line-height

• Margin/padding-top/bottom/left/right

• Max/min-height/width

• Outline-color/width

• Text-indent/shadow

You can see that this property is really very powerful.