CSS3 new animation, transition effects

The transform deformation

  • translateIt moves in two directions
        transform: translate(first value, second value);Copy the code
    • The first value x, the second value y
    • Use percentages to move the percentage of the container itself, not the parent element.
    • On the premise of not knowing the size of the small box itself, horizontal and vertical centering can be realized by positioning and transform 
          <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            /* Changes the size relative to itself, not the parent element */
            transform: translate(-50%, -50%);
        }
    </style>
    <body>
        <div class="box"></div>
    </body>
Copy the code
  • translateXIt moves along the X-axis alone
        transform: translateX(value);Copy the code
  • transLateYIt moves along the y axis alone
        transform: translateY(value);Copy the code
            <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* the first value is X-axis and the second value is Y-axis */
                transform: translate(200px.200px);
                /* moving along the x axis */
                /* transform: translateX(200px); * /
                /* moving along the y axis */
                /* transform: translateY(200px); * /
            }
        </style>
    <body>
        <div class="box"></div>
    </body>
Copy the code

Scale deformation

  • Scale scales in two directions
  • ScaleX scales the width

  • ScaleY will scale in height

        <style>
            .box2{
                width: 300px;
                height: 300px;
                position: absolute;
                top: 50%;
                left: 50%;
                overflow: hidden;
                border: 2px solid red;
            }
            .box2 img{
                width: 300px;
                height: 300px;
            }
            .box2:hover img{
                transform: scale(1.5);
            }
        </style>
    <body>
        <div class="box2">
            <img src="Add a picture" alt="">
        </div>
    </body>
Copy the code

Rotate Rotates about the axis

  • RotateX is rotated around the X-axis
    • If it is a square, rotating the area swept 360 degrees around the X-axis produces an object that looks like an inverted cylinder, with a side view of a circle
  • RotateY is rotated around the Y-axis
    • If it is a square, rotating the swept area 360 degrees around the Y-axis produces an object that looks like an upright cylinder and a circle from the top
  • RotateZ rotates around the z-axis
    • If you don’t change the point, it looks like the graph is rotating around zero
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* To see the effect of the transition */
                transition:  all 1s linear;
            }
            .box:hover{
                /* Rotate 360 degrees about the X-axis */
                transform: rotateX(360deg);
                /* Rotate 360 degrees about the Y-axis */
                /* transform: rotateY(360deg); * /
                /* Rotate 360 degrees about the z axis */
                /* transform: rotateZ(360deg); * /
            }
        </style>
        <div class="box"></div>
Copy the code

Skew tilt

  • SkewX Indicates the skew along the X axis
    • The perception of the graph in the first and second quadrants is inverted to the second quadrant, and in the third and fourth quadrants is inverted to the fourth quadrant.
  • SkewY Indicates a tilt along the y axis
    • The perception of the graph in the second and third quadrants is “being sucked to the second quadrant”, and in the first and fourth quadrants it is “sinking to the fourth quadrant” [with positive values].
  • Skew inclines in two directions
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* To see the effect of the transition */
                transition:  all 1s linear;
            }
            .box:hover{
                /* Horizontal tilt 36 degrees */
                transform: skewX(36deg);
                /* Vertical tilt 36 degrees */
                /* transform: skewY(36deg); * /
                /* Horizontal vertical tilt 36 degrees */
                /* transform: skew(36deg 36deg); * /
            }
        </style>
            <div class="box"></div>
Copy the code

Transform-origin changes the point of action (default is in the center)

  • The default value is center Center

  • The first value is left center right
  • The second value is vertical (top center bottom)
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                transition:  all 1s linear;
            }
            .box:hover{
                /* Rotate 360 degrees about the X-axis */
                transform: rotateX(360deg);
                /* Change the point to the lower right corner */
                transform-origin:right bottom;
            }
        </style>
            <div class="box"></div>
Copy the code

The perspective the depth of field

  • If you set the parent element, the child element will be smaller than the parent element
        <style>
            .box{
                perspective:1000px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: green;
                transition:  all 1s linear;
            }
        </style>
            <div class="box">
                <div class="box2"></div>
            </div>
Copy the code

Transition animation

  • Transition-property Specifies the property of the animation
  • Transition-duration Specifies the duration of the animation
  • Transition-timing-function Specifies the motion curve of the animation
    • linearuniform
    • ease[Default] The animation starts at a low speed, then speeds up and slows down before ending
    • ease-inThe animation starts at a low speed
    • ease-outThe animation ends at a low speed
    • ease-in-outThe animation starts and ends at a low speed
    • cubic-bezier(n,n,n,n)Its own value in the cubic- Bezier function. Possible values range from 0 to 1
  • Transition-delay Specifies the delay time
  • 【 compound attribute 】 transition
    • The first value is the property of the animation
      • allRepresents all mutable properties
      • Or write the property that you want to change separately
    • The first value is the time the animation is executed
    • The first value is the motion curve of the animation
    • The first value is the delay time
        <style>* {margin:0;
                padding:0;
            }
            .box{
                width: 100px;
                height: 100px;
                background:green;
                /* Transition attributes */
                transition-property: all;
                /* Animation execution time */
                transition-duration: 1s;
                /* Animation motion curve */
                transition-timing-function: ease;
                /* Delay time */
                transition-delay: 0s;
                /* Composite property first value: transitive property second value: animation execution time third value: animation motion curve fourth value: delay time */
                /* transition:height 1s linear 1s,width 1s linear 1s; * /
                /* all represents the attributes of all transformations */
                transition:all 1s linear 1s;

            }
            .box:hover{
                height: 500px;
                width:500px;
            }
        </style>
            <div class="box">
                <div class="box2"></div>
            </div>
Copy the code

Fine control of each frame and flow

  • Much more performance intensive than transition
  • @keyframesKey frames
    • The key to being able to control the animation process by process is this@keyframes.Key frames keyframesYou can control the intermediate steps of an animation sequence.
    • usage
      • Create a named@keyframesIs later used in the style of the elementanimation-nameProperty matches the animation with its keyframe declaration.
      • each@ keyframes rulesContains multiple keyframes, and each keyframe has a percentage value as a name that represents the phase in the animation at which the style contained in the frame is triggered.
      • The percentage code is not in a specific order and is executed in percentage order
      • You can start writing0%orformThe end can be written100%orto
    • Repeat definition
      • If multiple keyframes use the same name, the last one defined prevails. So animation will only use one keyframe at a time (stage).
      • If a@keyframesThe percentage of key frames inside is repeated, then@ keyframes rulesAll keyframes of that percentage in will be used for that frame. If multiple keyframes specify the same percentage value@ keyframes rulesIt is possible to use the cascading style inside.
    • The same attribute in the same keyframe is defined repeatedly
      • If an attribute is defined repeatedly in a key frame, and the CSS attribute values in the repeated key frame are different, the attribute defined last time takes effect.
    • Keyframes appear in! Important will be ignored.
  • animation-nameName of the animation
  • animation-durationThe time of animation execution
  • animation-timing-functionAnimated motion curves
    • linearuniform
    • ease[Default] The animation starts at a low speed, then speeds up and slows down before ending
    • ease-inThe animation starts at a low speed
    • ease-outThe animation ends at a low speed
    • ease-in-outThe animation starts and ends at a low speed
    • cubic-bezier(n,n,n,n)Its own value in the cubic- Bezier function. Possible values range from 0 to 1
    • stepsTwo parameters, the first is an integer greater than 0, which is the interval animation between two key frames into a specified number of small interval animation (if set to 5, 0-25% change five times); The second parameter determines the display effect
    • steps-startThis is actually the second parameter of steps, and step-start fills the interval animation with the following frame as it changes
    • steps-endThis is actually the second parameter of steps, and step-end fills the interval animation with the display effect of the previous frame during the change
  • animation-iteration-countThe number of times the animation moves
    • infiniteUnlimited time
    • nThe number of
  • animation-delayAnimation delay
  • animation-directionThe direction of each movement of the animation
    • normal[Default value] Press to play animation normally.
    • reverseAnimation playback in reverse
    • alternateThe animation is played forward in odd numbers and backward in even numbers.
    • alternate-reverseThe animation is played forward in even numbers and backward in odd numbers.
    • initialKeep the original attributes of the element
    • inheritInherits the attribute from the parent element
  • animation-fill-modeSets the state of the animation
    • none:Do not change the default behavior
    • forwards:When the animation ends, stop at the last frame
    • backwards:When there is a lag in animation, setting backwards will quickly run to the first frame and start animation
    • both:When the delay is set, the animation starts quickly with the first frame and stops at the last frame when the animation ends
  • animation[Compound attribute]
    • First value: the name of the animation
    • Second value: the animation execution time
    • Third value: the curve of animation motion
    • Fourth value: the time of animation delay
    • Number five: number of animation movements
    • Sixth value: direction of motion of animation
        <! -- actually in no particular order -->
    animation:run 1s linear 1s infinite alternate ;
Copy the code
  • example
    <style>
        body{
            background-color: black;
        }
        .outer{
            width: 300px;
            height: 285px;
            /* border: 1px solid red; * /
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-top: -142px; * /
            /* margin-left: -150px; * /
            /* This will be overwritten by later animations, so write directly to later animations, or use margin */
            transform: translate(-50%, -50%);

        }
        .outer img{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .outer img:nth-child(1) {animation: love 1s infinite linear;
        }
        .outer img:nth-child(2) {animation: love 1s infinite 0.25 s linear;
        }
        .outer img:nth-child(3) {animation: love 1s infinite 0.5 s linear;
        }
        .outer img:nth-child(4) {animation: love 1s infinite 0.75 s linear;
        }
        @keyframes love{
            0%{
                opacity: 0;
                transform: scale(0);
            }
            25%{
                opacity: 0.5;
                transform: scale(1);
            }
            50%{
                opacity: 1;
                transform: scale(2);
            }
            75%{
                opacity: 0.5;
                transform: scale(3);
            }
            100%{
                opacity: 0;
                transform: scale(4); }}</style>
    <body>
        <div class="outer">
            <img src="Picture path" alt="">
            <img src="Picture path" alt="">
            <img src="Picture path" alt="">
            <img src="Picture path" alt="">
        </div>
    </body>
Copy the code

Css3 new styles

Boder-radius Radius of the border

  • More than half the width is a circle, the width is the same height
    <style>
        .outer{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            -webkit-border-radius:50%;
            -webkit-transform: translate(-50%, -50%);
        }
    </style>
    <body>
        <div class="outer"></div>
    </body>
Copy the code

The box – shadow shadow

  • The first value is the horizontal offset
  • The second value is the vertical offset
  • The third value is ambiguity
  • The fourth value is the shadow size
  • The fifth value shadow color
  • The sixth valueinsetInner shadow [Do not write default outer shadowoutset 】
            div{
                box-shadow:10px 10px 10px 10px yellow inset;
            }
Copy the code
  • Can be used as a container border, does not occupy the position;[Border takes the actual position]
            div{
                width:100px;
                height:100px;
                background-color:yellow;
                /* No offset ambiguity to 0 remaining values as required */
                /* Use shadows to make border lines that do not occupy position */
                box-shadow:0 0 0 10px green;
            }
Copy the code
  • Multi-ring frame, no position;[Border takes the actual position]
            div{
                width:100px;
                height:100px;
                background-color:yellow;
                /* No offset ambiguity to 0 remaining values as required */
                /* Use shadows to make border lines that do not occupy position */
                box-shadow:0 0 0 10px green
                            0 0 0 30px red
                            0 0 0 60px blue
                            0 0 0 90px orange
                            0 0 0 120px black;
            }
Copy the code

Box-sizing model conversion

The gradient

  • Linear gradient(Linear Gradients)- Down/up/left/right/diagonal
    • Can add a variety of colors, at least two
    • By default, the direction is from the top down and can be changed. The starting point or direction or Angle is the starting position; If you combine directions, that’s where you start and where you end
    • You can also write an Angle, and then gradient it
    • The proportion of colors can also be controlled by a percentage
            div{
                height:5000px;
                background:-webkit-linear-gradient(left top,lightcoral 20%,lightseagreen 80%,lightsalmon 20%);
                }
Copy the code
  • Radial gradient(Radial Gradients)- defined by their centers
    • Can add a variety of colors, at least two
    • You can set the gradient center, shape, and size
        div {
        background-image: radial-gradient(center,circle,red, yellow, green);
        }
Copy the code

Media query [mostly used for mobile end adaptation]

  • @mediaDifferent style rules can be customized for different media types.
  • Set different styles for different conditions

  • grammar

    • @ Media equipment and conditions and...Multiple conditions can be added
    <style>
        .box{
            width:200px;
            height:200px;
            background:black;
        }
        /* When the viewport width is less than or equal to the maximum width we set */
        @media screen and (max-width:768px) {.box{
                width:100px;
                height:100px;
                background:yellow; }}/* When the viewport width is greater than or equal to our minimum width */
        /* @media screen and (min-width:991px){ .box{ width:100px; height:100px; background:red; }} * /
        /* When the viewport width is greater than or equal to our minimum width and less than or equal to our maximum width */
        /* @media screen and (min-width:768px) and (max-width:992px){ .box{ width:100px; height:100px; background:red; }} * /
    </style>
    <div class="box">
    </div>
Copy the code

Compatibility processing [to make styles compatible with different browsers]

  • To make styles compatible with different browsers, you can prefix them with a specific prefix.
  • -webkit-Google [Mobile]
  • -moz-Firefox 【 not used 】
  • -ms- ie
  • -o-Openg 【 uncommon 】