CSS Summary Notes: Examples of Transformations, Transitions, and Animations

1. Transition

Transition property usage: transition :transition-property transition-duration transition-timing-function transition-delay

Can be specified together or separately

transition-property: is the property to be transitioned (such as width, height), all means all are changed.

transition-duration: the time taken, in seconds or milliseconds

transition-timing-function: specifies the animation type (motion curve). There are several types of motion curves:

ease=>slow down gradually (default value) linear=>constant speed ease-in=>accelerate ease-out=>decelerate ease-in-out=>accelerate first and then decelerate

transition-delay delay time, in s or ms

<!DOCTYPE html>
<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>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

The result is as follows. When the mouse is moved up, the change is no longer instantaneous, but is completed transitionally.

2. Transform

(1) 2D deformation

(a) Move translate(x,y)

The movement can be specified in pixels or percentages. Note: the specified percentage is a percentage of the box's own size, so it can be used to set the center alignment when positioning the box (set left: 50% and then move it -50% of the box itself).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        div:active {
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

After clicking, the box moves. The code for centering the positioned box is as follows

<!DOCTYPE html>
<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>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>

</body>

</html>

The result is

(b) Scaling scale(x, y)

If x,y is set to be greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.

<!DOCTYPE html>
<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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

x specifies the degree value, positive values are clockwise and negative values are counterclockwise.

For rotation, you can use transform-origin to specify the rotation center point. You can also specify specific pixel values for left top right bottom.

<!DOCTYPE html>
<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>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(d) Skew (x deg, y deg)

x,y specify the tilt angle in the x and y directions respectively, which can be negative. If the y value is not specified, the default value is 0.

<!DOCTYPE html>
<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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(2) 3D deformation

(a) Rotation (rotateX, rotateY, rotateZ)

3D rotation is similar to 2D, except that one is based on two-dimensional coordinates and the other is based on three-dimensional coordinates. The three values can be specified together or individually.

<!DOCTYPE html>
<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>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(b) Move (translateX, translateY, translateZ)

3D movement is identical to 2D movement for movement in the xy direction. Only the movement in the z direction is different. Movement in the Z direction means distance becomes farther and closer in real life. Therefore, the result displayed on the web page becomes larger when it is closer and smaller when it is farther away.

To make the Z-axis movement effective, you must first set the perspective (the distance between the eye and the screen);

<!DOCTYPE html>
<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>
        body {
            perspective: 1000px;
            /* The smaller the value, the closer the eyes are*/
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3. Animation

(1), animation: animation- name || animation- duration || animation- timing-function || animation- delay || animation- iteration-count || animation- direction || animation- fill-mode;

animation-name: animation name (animation defined by yourself using @keyframes)

animation-duration: duration

animation-timing-function: Motion curve, similar to the motion curve of transition.

animation-delay: delay time

animation-iteration-count: number of loops (infinite is an infinite loop)

animation-direction: whether it is reverse (whether the animation starts from the end and plays backwards)

animation-fill-mode: Set the state outside the animation playback (the state at the end) none | forwards (set to the state at the end) | backwards (set to the state at the beginning) | both (set to the state at the beginning or end)

animation-play-state: Set the animation state running start|paused pause

(2) @keyframes custom animation

The format is as follows

@keyframes animation name {
from{start} 0%
to{end} 100%
}

You can use from...to to specify the animation process, or you can use 0%~100% to specify the animation process.

<!DOCTYPE html>
<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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: animation name, animation time, motion curve, when to start, playback times, whether to play in the opposite direction*/
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: HTML Tutorial: Collection of commonly used HTML tags (4)

>>: MySQL password contains special characters & operation of logging in from command line