tags: [CSS,Transition ]
Copy the code

Transition

1. What is Transition?

  • 英 文: Transition; Change; Change. change

2. What’s transition good for?

Effect: Transition effect (element style from attribute to style from one value to another value)

Grammar:

transition: [attribute of effect] [duration of effect];* / / * instance
transition : width 3s ;
Copy the code
  • 3s: represents the transition effect set by width attribute, and the duration is 3s (for transition time: the larger the time value is, the longer the time transition time is, and the slower the change is by comparison)
  • Width: Attributes that need to be transitioned

⚠️ To support other effects, additional attribute support needs to be added for compatibility support

/* Full format */

div
{
    /* Note: If the time is not written, the default is 0*/
	transition : width 2s; 
		/* Added to carry attribute Settings */
     /*Firefox 4 (compatible with Firefox 4)*/
	-moz-transition : width 2s;
     /*Safari and Chrome(compatible with Safari and Google Chrome)*/
	-webkit-transition: width 2s;
    /*Opera */
	-o-transition: width 2s; 
}
Copy the code

3. How does the effect work?

  • There needs to be “conditions” to comeThe triggerAttribute value changes (generallyThe mouse is suspended)
  • The transition is set inThe originalProperty value in the selector
  • A change is a “change relative to the original property value”

▶ case:

When the mouse hovers over the

element, the transition effect starts, and when the mouse moves away, the effect disappears and returns to its original state

Reference effect

<! -- Example code -- can run directly -->
<! DOCTYPEhtml>
<html>
    <head>
         <style>
             div {
                 width: 100px;
                 height: 100px;
                 background: yellow;
                 transition: width 2s;
                 /* Set transition */
                 -moz-transition: width 2s;
                 -webkit-transition: width 2s;
                 -o-transition: width 2s;
             }
             /* Sets the hover style for div */
             div:hover {
                 width: 300px;
             }
             p b {
                 color: red;
             }
         </style>
    </head>
    <body>
         <div>
         </div>
         <p>Moving the mouse over the yellow div shows the transition effect</p>
         <p><b>Note: This example is not valid in Internet Explorer</b></p>
    </body>
</html>
Copy the code

Effect:

Hover,div attribute width from 100px->300px. Hover,div attribute width from 100px->300px

4. Reference

  • CSS3_ transition

  • MDN- Use CSS Transitions

  • transition