A detailed introduction to the transition attribute transition in CSS3 elements

TransitionAnimation is the basis of animation

Before learning animationproperty
We need to understand the transition property transition

Transition transition

Let’s look at a small example first

<p class="demo"></p>

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

This way when my cursor hovers over the demo
its width becomes 200px

Is there a way to make the width of the element slowly become wider when our cursor is hovering over it?
Before CSS3 we could only use the troublesome jsscript
But now we only need Our purpose can be achieved by adding an attribute

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

transition. Its function is to specify when certain styles of your elements change
These styles can gradually transition to the final attribute value

It is a composite property
has the following sub-properties

• transition-property: css property that specifies transition or dynamic simulation

• transition-duration: Specify the time required for transition

• transition-timing-function: Specify transition Function

• transition-delay: Specify the delay time for the start of occurrence

transition-property We can write which property we want to transition
or simply write the transition The keywords of all attributesall

transition-duration gradient time attribute value is "number + s"
Represents transition within a few seconds

transition-timing- function is an optional attribute value, with the following optional values

• linear
  Linear transition, equivalent to 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 to Bezier curve (0.42, 0, 1.0, 1.0)
  

• ease-out

  From fast to slow, equivalent to Bezier curve Curve (0, 0, 0.58, 1.0)
  

##ease-in-out
• From slow to fast to slow again, equivalent to the Bezier curve (0.42, 0, 0.58 , 1.0)

  
  

step-start
• Equivalent to steps(1, start)

  
  

step-
• end

  Identical to steps(1, end)
  

steps():
• Step function with two parameters. The first parameter is a positive

  integer
  , specifying the number of function steps. The value of the second parameter is start or end, specifying the time point when 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 curve type, the 4 values ​​​​must be in the [0, 1] interval

  
  

We don’t use most of them. The most commonly used ones are 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 short while before the transition

then add the time we need to delay "number + s" at the end of this composite attribute

This attribute can set multiple different attributes

All we have to do is separate them with commas

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

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

Another reason to use transition attributes instead of scripts is that

script methods may cause conflicts when changing the styles of multiple elements.

The solution is to use bool
variables
to lock, which is still very difficult. Trouble Our transition transition
attribute does not need to be considered so much Elements do not affect each other

Another thing to note is that element transition needs Know the specific starting and ending attributes of the style

---

For example, the width in our example clearly transitions from 100px to 200px

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

Change the suspension style width to auto We find that when the cursor hovers the element The last

width attribute did not transition

Attributes involved in the transition

Of course not all styles can be transitioned

For example, if you want

display :block<a href="http://www.php.cn/wiki/927.html" target="_blank"> Transition to </a>display:inline-block That is impossibleThe following attributes participate 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 attribute is really powerful

The above is the detailed content of A detailed introduction to the transition attribute transition in CSS3 elements. For more information, please follow other related articles on the PHP Chinese website!