animation

01. Transition

Transition – Transitions allow you to specify how to switch when a property changes.

transition-property:

Specify the attributes to perform the transition:

Used between multiple attributes, separated;
If all attributes need to be transitioned, use the all keyword.
Most attributes support transitions, noting that transitions must be made from one valid value to another.

transition-duration:

Specifies the duration of the transition effect. Time unit: s and ms 1s = 1000ms

transition-timing-function:(Transitive timing function)

Specifies how the transition is executed.Copy the code

Optional value:

Ease, the default, starts slowly, speeds up first, then slows down
Motion is uniform
Ease-in accelerates exercise
Ease-out deceleration
Ease-in-out accelerates first and then slows down
Cubic -bezier() to specify the timing function cubic-bezier.com
The transition effect can be set to a second value:
- End, perform a transition at the end of time (default)
- Start, performs the transition at the start of time

Transition-delay: The delay in executing the transition effect after a period of time.

transition

All transition-related attributes can be set at the same time, with only one requirement: if you want to write delay, the first of the two times is duration and the second is delay.

The transition: 2 s margin - left 1 s cubic - the bezier (. 24,. 95,. 82, 0.88);Copy the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>* {margin: 0;
            padding: 0;
        }

        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }

        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
            
        }

        .box2{
            background-color: #bfa;
            /* margin-left: auto; * /
            /* transition:all 2s; * /
           
            /* transition-property: height , width; * /
            /* transition-property: all; * /

             /* transition-duration: 100ms, 2s; * /
             /* transition-duration: 2s; * /

             / * the transition - the timing - function: cubic - the bezier (. 24,. 95,. 82, 0.88); * /
             /* transition-timing-function: steps(2, start); * /

             /* transition-delay: 2s; * /
             
        }

        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }

        .box1:hover div{
            /* width: 200px; height: 200px; * /
            /* background-color: orange; * /
            margin-left: 700px;
        }
    </style>

</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>
Copy the code

02. Animation

animation

Animations and transitions are similar in that they can achieve dynamic effects, but transitions are triggered only when a property changes. Animations can trigger dynamic effects automatically.

To set the animation effect, you must first set oneKey framesThe keyframe sets the animation to perform each step.

@keyframes test {
    /* from indicates the starting position of the animation. You can also use 0% */
    from{
        margin-left: 0;
        background-color: orange;
    } 

    /* The end position of the to animation can also use 100%*/
    to{
        background-color: red;
        margin-left: 700px;
    }
Copy the code

Set the animation

1. animation-name:

The name of the keyframe to apply to the current element

animation-name: test; 
Copy the code

2. animation-duration:

The execution time of the animation

animation-duration: 4s;
Copy the code

3. The animation – delay;

Animation delay

animation-delay: 2s;
Copy the code

4. animation-timing-function:

Animation-timing -function: ease-in-out;

5. animation-iteration-count

The number of times the animation was executed

Optional value:

The number of
Infinite execution

6. animation-direction

Specify the direction in which the animation should run.

Optional value:

Normal defaults every time you run from from to
Reverse runs from to to from every time
Alternate executes backwards when running a repeat animation from from to
Alternate-reverse executes backwards when running a repeat animation from to to from
```
 animation-direction: alternate-reverse;
Copy the code
```

7. animation-play-state:

Sets the execution state of the animation

Optional value:

Running The default value for animation execution

Paused animation

 animation-play-state: paused; 
Copy the code

8. animation-fill-mode:

Fill mode for animation

Optional value:

The default value is None. The element returns to its original position after animation
Forward animation completes elements will be stopped at the end of animation
Backwards animation while waiting, the elements will be in the starting position
Both combines forwards and forwards

03. Transform

Morphing is using CSS to change the shape or position of an element; The distortion does not affect the layout of the page.

Transform is used to set the morphing effect of the element
Translation:

TranslateX () moves along the X-axis;

TranslateY () moves along the y axis;

TranslateZ () moves along the z-axis;
- Shifting elements, percentages are calculated relative to themselves

1. Center the element by deforming it

.box3{
  
    background-color: orange;
    position: absolute;

    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  
}
Copy the code

.box3{
    width: 200px;
    height: 200px;
    background-color: orange;
    position: absolute;

     /* This center only applies to the size of the element */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  
}
Copy the code

Margin: Auto This center method is only suitable for determining the size of the element.

2. Set mouse to translateY

.box4..box5{
    width: 220px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin: 0 10px;
    transition:all .3s;
}

.box4:hover..box5:hover{
    transform: translateY(-4px);
    box-shadow: 0 0 10px rgba(0.0.0.3)}Copy the code

3. Z-axis translateZ

Z-axis translation, adjust the position of the element on the Z-axis, the normal situation is to adjust the distance between the element and the human eye, the greater the distance, the closer the element is to the human;

Z-axis translation belongs to the stereo effect (near large and far small), by default, the page does not support perspective, if you need to see the effect must set the page distance.

Set through the Perspective property.

<style>
    html{
        /* Set the visual distance of the current page to 800px, the distance between human eyes and the page */
        perspective: 800px;
    }

    body{
        border: 1px red solid;
        background-color: rgb(241.241.241);
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin: 200px auto;

        transition:2s;
    }

    body:hover .box1{
        transform: translateZ(500px);
    }
</style>
Copy the code

4. Rotate

An element can be rotated by a specified Angle along x, y, or z by rotation

RotateX (); RotateY (); RotateZ ();

/*1turn indicates 1turn */
transform: rotateZ(.25turn);
/* Translation and rotation mix */
transform: rotateY(180deg) translateZ(400px); 

transform: translateZ(400px) rotateY(180deg);Copy the code

<style>
    html{
        perspective: 800px;
    }

    body{
        border: 1px red solid;
        background-color: rgb(241.241.241);
    }
    .box1{
        width: 320px;
        height: 320px;
        background-color: #bfa;
        margin: 200px auto;

        transition:2s;
    }

    body:hover .box1{
    
        transform: rotateY(180deg);
        /* Whether to display the back of the element */
        backface-visibility: hidden;

    }
</style>
Copy the code

5. Scale

Functions that scale elements:

ScaleX () scales horizontally;
ScaleY () vertical scaling;
Scale () scales in both directions;

Set the origin of deformation by transform-origin.

The default origin of the deformation is center

transform-origin:20px 20px;

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            perspective:800px;
            
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            transition:2s;
            margin: 100px auto;

            /* The deformation of the origin of the default center*/
            /* transform-origin:20px 20px;  */
        }

        .box1:hover{
     
            transform:scale(2)}.img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }

        img{
            transition:.2s;
        }

        .img-wrapper:hover img{
            transform:scale(1.2);
        }

    </style>
</head>
<body>
    <div class="img-wrapper">
        <img src="an.jpg" width="100%">
    </div>
</body>
</html>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS Memo (5) : Animation

animation

01. Transition

transition-property:

transition-duration:

transition-timing-function:(Transitive timing function)

transition

02. Animation

Set the animation

1. animation-name:

2. animation-duration:

3. The animation – delay;

4. animation-timing-function:

5. animation-iteration-count

6. animation-direction

7. animation-play-state:

8. animation-fill-mode:

03. Transform

1. Center the element by deforming it

2. Set mouse to translateY

3. Z-axis translateZ

4. Rotate

5. Scale

CSS Memo (5) : Animation

animation

01. Transition

transition-property:

transition-duration:

transition-timing-function:(Transitive timing function)

transition

02. Animation

Set the animation

1. animation-name:

2. animation-duration:

3. The animation – delay;

4. animation-timing-function:

5. animation-iteration-count

6. animation-direction

7. animation-play-state:

8. animation-fill-mode:

03. Transform

1. Center the element by deforming it

2. Set mouse to translateY

3. Z-axis translateZ

4. Rotate

5. Scale

Related Posts

Tricks used by Promise and async/await

React 1

Big screen display of visual data based on Echarts+HTML5 – Big Data Management Platform Center