What are the benefits of animation in css3-Front-end Q&A-php.cn

What are the benefits of animation in css3

青灯夜游

Release： 2022-01-13 16:04:42

Original

1859 people have browsed it

The benefits of implementing animation in css3: 1. The browser can optimize the animation (no animation when the element is invisible, reducing the impact on FPS); 2. The implementation code is relatively simple; 3. Hardware acceleration can be used; 4. Does not occupy the main thread.

What are the benefits of animation in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Generally speaking, there are only three properties of CSS3 animation: transform, transition, and animation.

transition:1s (transition animation effect): from a specific value of one person to another transition value

transform:rotate(300deg) x,y rotation transform:rotageX (300deg) transform:rotageY(300deg)

transform:scale(0.5,2) Scale x-axis, y-axis>1 enlarge<1 reduce

transform:translateX(100px)Translate x-axis transform:translateY(100px) Translate the y-axis

transform:translate(100px 100px) Translate the x, y-axis

transition:rotate(300deg) scale(0.5,2) While scaling, While rotating

transition:transform 1s specifies the effect on transform

transition:margin 1s specifies the effect on margin and directly changes the size and position, showing the changed structure, without transition and deformation time

The focus of animation is on the timeline and key frames, which is to create frames so that different frames change differently at different time nodes. On the one hand, animation based on animation and @keyframe also aims to achieve the separation of performance and behavior

Small example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逐帧动画</title>
    <style type="text/css">
        .a{
            width: 1000px;
            height: 400px;
            background: #bbb;
            position: relative;
            margin: 100px auto;
            overflow: hidden;

        }
        .b{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            top:-150px;
            left: 50px;
            text-align: center;
            background: #aaa;
            line-height: 150px;
            animation:s 2s infinite;
        }   
        .c{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            bottom:-150px;
            right: 50px;
            background: #ccc;
            line-height: 150px;
            animation:ss 2s infinite;
        }
        @keyframes ss{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(-90px);
                background: #7dd;
            }
            50%{
                transform:translateY(-150px);
                background: #3aa;
            }
        }
        @keyframes s{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(90px);
                background: #7dd;
            }
            50%{
                transform:translateY(150px);
                background: #3aa;
            }
        }
    </style>
</head>
<body>
    <header>
        <div>
            <div>啦啦啦啦啦啦啦啦</div>
            <div>啦啦啦啦啦啦啦啦</div>
        </div>
    </header>
</body>
</html>

Copy after login

Benefits of using css3 to implement animation

1. The browser can optimize the animation (the element is not visible No animation, reducing the impact on FPS)

2. The implementation code is relatively simple

3. Hardware acceleration can be used

4. Does not occupy the main thread

Disadvantages:

1. Poor compatibility.

2. The animation control is not flexible enough, the running process is weak, it cannot attach a binding callback function, cannot add a callback function at a specific position or bind a playback event, and there is no progress report.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the benefits of animation in css3. For more information, please follow other related articles on the PHP Chinese website!