The transition transition

  • The transition property is a colorful feature of CSS3. Transitions can automatically add “tween animation” for == an element to change between styles.

compatibility

  • Transition from IE10 compatible, mobile compatible good
  • Once upon a time, animation effects on web pages were basically implemented by JavaScript timer, now gradually changed to CSS3 transition
  • Advantages: more delicate animation, small memory overhead

Basic use of the Transition attribute

The Transition property has four elements

Ransition: width== 1s==(animation duration unit can only be S)== linear==(change speed curve this is uniform)== 0S==(delay time can not be written or omitted S)==;

What attributes can be involved in the transition

  • All numeric attributes can participate in transitions, such as Width height left top border-radius.

  • Background colors and text colors can be transitioned

  • All morphs (both 2D and 3D) can be transitioned

all

If you want all attributes to participate in the transition, you can write all

  • transition:all 1s linear 0s;

Four small attributes of excess

attribute meaning
transition-property Which attributes to transition
transition-duration Animation time
transition-timing-function Animation Change Curve (slow effect)
transition-delay Delay time

Case presentation

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> * {margin:0; padding:0; } .box1 { width:200px; height:200px; background-color:orange; transition: width 5s linear 0s; } .box1:hover { width:800px; } .box2 { width:1000px; height:200px; margin-bottom:20px; } .box2 p { position:relative; width:200px; height:200px; background-color:orange; left:0; transition:left 1s linear 0s; } .box2:hover p{ left:1000px; } .box3 { width:200px; height:200px; background-color:red; transition:background-color 1s linear 0s; margin-bottom:10px; } .box3:hover { background-color:green; } .box4 { width:200px; height:200px; background-color:red; margin-bottom:10px; border-radius:0; transition:border-radius 1s linear 0s; } .box4:hover { border-radius:50%; } .box5 { width:200px; height:200px; background-color:orange; transition:transform 1s linear 0s; margin-bottom:20px; }.box5:hover {transform:scale(1.2) rotate(360deg); } .box6 { perspective:300px; width:200px; height:200px; border: 1px solid #000; margin-bottom:20px; } .box6 p { width:200px; height:200px; background-color:orange; transition:transform 1s linear 0s; } .box6:hover p{ transform:rotateX(360deg) rotateY(360deg); } .box7 { width:200px; height:200px; background-color:orange; border-radius:0; transition:all 1s linear 0s; margin-bottom:20px; } .box7:hover { width:400px; height:160px; background-color:green; border-radius:50%; } .box8 { perspective:300px; width:200px; height:200px; border: 1px solid #000; margin-bottom:20px; } .box8 p { width:200px; height:200px; background-color:orange; transition:transform 1s linear 0s; } .box8:hover p{ transform:rotateY(360deg); } </style> </head> <body> <div class="box1"></div> <div class="box2"> <p></p> </div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"> <p></p> </div> <div class="box7"></div> <div class="box8"> <p></p> </div> </body> </html>Copy the code