current position:Home>[CSS] transition, transformation and animation

[CSS] transition, transformation and animation

2021-08-26 00:47:20 Ruovan

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge

CSS3 transition ——transition

Usually with hover Use it with

  • grammar
 div {
     width: 100px;
     height: 100px;
     background-color: red;
     /* Who makes the transition, who adds  */
     
     /*transition:transition-property transition-duration transition-timing-function transition-delay*/
     /*transition:  Changing attributes   Spend time   Motion curve   When to start ;*/
     transition: width 1s ease 1s;
     
     /* If you want to change multiple properties , You can use commas to separate */
     transition: width 1s, height 1s;
     
     /* Or use  all  Instead of */
     transition: all 1s;
 }
 
 div:hover {
     width: 200px;
 }
 Copy code 
  • transition-timing-function Motion curve attribute values :

    • linear—— uniform
    • ease—— Slow down gradually ( The default value is )
    • ease-in—— Speed up
    • ease-out—— Slow down
    • ease-in-out—— Speed up first, then slow down

CSS Of 2D transformation

One 、 Big concept

  • CSS3 The transformation can transform the elements in the page :

    • Move :translate
    • rotate :rotate
    • The zoom :scale
  • CSS3 All conversion methods belong to transform attribute

Two 、 Small details

01. translate

  • translate(x,y) Define where to move

    • It can be Specific value , It can also be percentage ( Percentage means Move the element itself Width or height of )

    • It can be a number , It can also be two values

      • A numerical value represents X Coordinates and Y Coordinate equals
      • The two values represent X Coordinates and Y coordinate
    • Or you can just move X Coordinates or Y coordinate

      • translateX(100px);
      • translateY(100px);

translate The movement does not affect the position of other elements

No effect on inline labels

 div:hover {
     /*  And then use translate Define where the element is moved  */
     transform: translate(100px, 100px);
     
     /*  You can also move separately X coordinate , perhaps Y coordinate  */
     /*  But it should be noted that , You can't set... At the same time , Simultaneous setting , Only the last one will take effect ! */
     /* transform: translateX(100px); */
     /* transform: translateY(100px); */
 }
 ​
 Copy code 

2d-1.gif

(1) Percentage application

  • The box is centered horizontally and vertically
 /*  Percentage application : The box is horizontal / Vertical center  */
 .son {
     /* Absolute positioning */
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: red;
     /* Positioning position 50%*/
     top: 50%;
     left: 50%;
 ​
     /* Move half the width and height of the child element itself , Reach the center of the box */
     transform: translate(-50%, -50%);
 }
 ​
 Copy code 

2D-2.png

02. transform-origin

  • transform-origin:X Y Define the center of rotation

    • The default value is :50% 50%
    • Can be set up Exact value | Position NOUN | percentage

03. rotate

  • rotate(angle) Define element rotation :rotate(45deg)

    • Values for : Numbers + angle (deg)
  • You can set the center of rotation :transform-origin

 .box {
     /* Define the center of rotation */
     transform-origin: left bottom;
 }
 ​
 .box:hover {
     /* Mouse hover rotation 45 degree */
     transform: rotate(45deg);
 }
 ​
 Copy code 

2d-3.gif

03. scale

  • scale(x,y) Define element scaling

    • (x,y) Write numbers in it , Don 't write units , Numbers refer to multiples
    • You can also set only one number
    • Greater than 1 It's amplification , Less than 1 It's shrinking
    • Default center point scaling , You can set the zoom center :transform-origin
    • You can also give X|Y Set zoom

    【 Be careful 】scale Scaling does not affect the position of other boxes

 ​
 .box:hover {
     /*  Define scaling , Double the width , High magnification 3 times  */
     transform: scale(2, 3);
 ​
 }
 ​
 Copy code 

2d-4.gif

3、 ... and 、 Composite writing ( Simplify writing )

translate(X,Y) Write together with other attributes , Put it first

 div:hover{
     transform:translate(100px) rotate(90deg) scale(1.2);
 }
 Copy code 

2d-5.gif


CSS Of 3D transformation

One 、 Big concept

  • Compared with 2D The conversion (X,Y) Plane axis ,3D One more conversion Z Axis , become (X,Y,Z) The three-dimensional axis of

Two 、 Small details

01. perspective

  • perspective Used to define 3D Transform the perspective view of the element

    • Define the distance from the observation point to the element , The smaller the value, the closer , Then the more obvious the later changes ( Big )—— Near and far away

      Personal understanding , Default perspective Is equal to 0 Of , That is, the observation point is on the surface of the screen , The element is as big as it should be

      If the distance is set , The observation point is away from the screen , Move towards people , This will create a situation of near large and far small

  • be necessary , Cannot be observed without setting 3D View

  • Defined in the parent element ( Or ancestral elements ), Acting on child elements ( Progeny element ) On

    .father{
        /* The default value is 0*/
        perspective:500px;
    }
     Copy code 

02. transform-style

  • Specify how elements are rendered in three-dimensional space

    • 2D present :transform-style:flat
    • 3D present :transform-style:preserve-3d
  • Defined in the parent element ( Ancestral elements ) in

    .father {
        /*  Add perspective to the parent element  */
        perspective: 700px;
        /* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space  */
        transform-style: preserve-3d;
    }
     Copy code 

03. transform-origin

  • transform-origin:X Y Z Used to define 3D Center of rotation
    • X Y Z The default value is :50% 50% 0
  • Settable value : length | percentage | Position NOUN
    • left | center | right —— Horizontal value
      • The corresponding percentage is left=0% | center=50% | right=100%
    • top | center | bottom —— Value in vertical direction
      • The corresponding percentage is top=0% | center=50% | bottom=100%
  • Number of settable values : A value 、 Two values 、 Three values

(1) The case of a value

  • If you set the length value or percentage , Then for X The value of the shaft ,Y The axis is the default 50%

  • If you set a location NOUN , Then observe the direction of the noun

  • If it's horizontal : left | right, Then for X In the direction of the axis , that Y Value is the default :50% perhaps center ;

    • ( At this time, only non X Rotate the axis to see the effect )
  • If it's vertical : top | bottom, Then for Y In the direction of the axis , that X Value is the default :50% perhaps center ;

    • ( At this time, only non Y Rotate the axis to see the effect )
.son {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: 1s;
    
    transform-origin: left;
    /* It's actually equivalent to transform-origin:0 50% 0;*/
    
    /*transform-origin: right;*/
    /* It's actually equivalent to transform-origin:100% 50% 0;*/
    
    /*transform-origin: top;*/
    /* It's actually equivalent to transform-origin:50% 0 0;*/
    
    /*transform-origin: bottom;*/
    /* It's actually equivalent to transform-origin:50% 100% 0;*/
}

.point {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #00f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.son:hover {
    /* transform: rotateX(45deg); */
    transform: rotateY(45deg);
    /* transform: rotateZ(45deg); */
}
 Copy code 

origin-1.1.giforigin-1.2.gif

origin-2.1.giforigin-2.2.gif

(2) The case of three values

  • In the case of three values , Third values Z Can only be length values

04. translate

  • translate3d(x,y,z) Definition 3D Mobile conversion
    • It can be set separately :
      • translateX(100px);
      • translateY(100px);
      • translateZ(100px);
        • 【 Be careful 】 This property value can only be a length value , The other two can be Length value | percentage
.father {
    /*  Add perspective to the parent element  */
    perspective: 700px;
    /* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space  */
    transform-style: preserve-3d;
}

.son {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: red;
    transition: 1s;
}

.son:hover {
    /*  And then use translate Define where the element is moved  */
    transform: translate3d(50px, 50px, 200px);
}
 Copy code 

It has a bigger effect , This is because of the movement Z Axis position , Closer to the screen or observation point , Then the element becomes larger in the sense

3d-1.gif

05. rotate

  • rotate3d(x,y,z,angle) Define the element 3D rotate
    • (x,y,z) It's a 0 To 1 Value between , It is mainly used to describe the elements around X The vector value of the axis rotation .
    • (angle) It's an angle value , Specified in the 3D Space rotation angle , Positive clockwise rotation , On the contrary, when the element is inverse .
  • Set separately :
    • rotataX(angle)
    • rotataY(angle)
    • rotataZ(angle)
.son:hover {
    /*  And then use rotate Defines the rotation angle of the element  */
    /* transform: rotate3d(1, 1, 1, 45deg); */
    /* transform: rotateX(45deg); */
    /* transform: rotateY(45deg); */
    transform: rotateZ(45deg); 
}

 Copy code 

3d-2.3.gif3d-2.1.gif3d-2.2.gif

06. scale

  • scale3d(x,y,z) Definition 3D Scaling transformation

  • Set separately :

    • scaleX()

    • scaleY()

    • scaleZ()

.son:hover {
    /*  And then use scale Defines the element scaling factor  */

    /* transform: scale3d(1,1,1); */
    transform: scaleX(1.5);
    /* transform: scaleY(1.5); */
    /* transform: scaleZ(1.5); */
    
    /* 【 notes 】 here scaleZ(1.5) There is no effect , Because it is Z Enlarged in the axial direction , and Z The length on the shaft is 0, So I can't see the effect  */
}

 Copy code 

3d-3.2.gif3d-3.1.gif

3、 ... and 、 Other

  • Set up transform Don't write separately , The style will be overwritten

    That is, it is wrong

    div{
    	trandform:translateX(50%);
    	transform:rotate(45deg);
    }
     Copy code 
  • When rotating, pay attention to the position of the rotation center


CSS Animation implementation of

One 、 Create animation

  • Use @keyframes—— Keyframes , Create animation .

    use from Define start state , use to Define the end state

     @keyframes move{
         from {
             transform:translate(0,0);
         }
         to{
             transform:translate(100px,100px);
         }
     }
     Copy code 

    Or define it as a percentage ,0% Define the starting state ,100% Define the end state , Other states can be added in the middle

     @keyframes move{
         0%{
             transform:translate(0,0);
         }
         50%{
             transform:translate(0,100px);
         100%{
             transform:translate(100px,100px);
         }
     }
     Copy code 

Two 、 Call animation

  • Bind the animation in the element selector where you want to generate the animation

  • At least Specify these two properties : The name of the animation Animation duration

     div{
         animation-name:move;
         animation-duration:3s;
         /* Simplify writing */
         animation:move 3s;
         /* compatible */
         -webkit-animation:move 3s;
     }
     Copy code 

(1) Attribute expansion

 div{
     /* Call animation  */
     animation-name: move;
     
     /*  Define transition time , Default 0s, Therefore, the transition time must be set  */
     animation-duration: 10s;
     
     /*  Animation motion curve , Default ease */
     /* ease | linear | ease-in | ease-out | stpes(number)*/
     animation-timing-function: ease;
     
     /*  Animation delay , Default 0s */
     animation-delay: 1s;
     
     /*  Animation - repeat - frequency , Default 1 Time , Set up infinite Infinite times  */
     animation-iteration-count: infinite;
     
     /*  Whether to play in the opposite direction , Default noraml, Reverse play reverse, First positive and then negative alternate, Reverse first and then positive alternate-reverse*/
     animation-direction: normal;
     
     /*  After the end of the State , Default backwards  Return to the starting state , Stop at the end forwards */
     animation-fill-mode: forwards;
 ​
     /*  Composite writing ( Simplify writing ) */
     /* animation:  The name of the animation   The duration of the   Motion curve   When to start   plays   Whether it's reverse   Animation start or end state  */
     /*  The above can be written as : */
      animation: move 10s ease 1s infinite normal forwards; 
 }
 ​
 div:hover {
     /*  Animation running state , Default running function , The mouse passes and stops the animation paused */
     animation-play-state: paused;
 }
 Copy code 

I like chicken with vegetables , If not, please forgive me

copyright notice
author[Ruovan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826004714394q.html

Random recommended