Quels sont les avantages de l'animation en CSS3-Questions et réponses frontales-php.cn

Quels sont les avantages de l'animation en CSS3

青灯夜游

Libérer： 2022-01-13 16:04:42

original

1860 Les gens l'ont consulté

Avantages de l'implémentation de l'animation en CSS3 : 1. Le navigateur peut optimiser l'animation (pas d'animation lorsque l'élément est invisible, réduisant l'impact sur les FPS) ; 2. Le code d'implémentation est relativement simple 3. L'accélération matérielle peut être utilisée ; 4. Il n’occupe pas le fil principal.

Quels sont les avantages de l'animation en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En général, il n'y a que trois propriétés de l'animation CSS3 : transformation, transition et animation.

transition:1s (effet d'animation de transition) : de la valeur spécifique d'une personne à une autre valeur de transition

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

transform:scale (0,5,2) Mettre à l'échelle l'axe des x, l'axe des y > 1 zoom avant < 1 zoom arrière

transformation : traduireX (100px) traduire l'axe des x transformer : traduireY (100px) traduire l'axe y

transformer : traduire (100px 100px) Traduire les axes x et y

transition:rotate(300deg) scale(0.5,2) Mettre à l'échelle et faire pivoter en même temps

transition:transform 1s spécifie l'effet sur la transformation

transition:margin 1s spécifie le effet sur la marge, puis la modifie. Taille et position, montrant la structure modifiée, pas de temps de transition ni de déformation. L'animation se concentre sur la chronologie et les images clés. Il s'agit de créer des images afin que différentes images changent différemment à différents nœuds temporels en fonction de l'animation. sur l'animation et @keyframe D'une part, c'est aussi pour réaliser la séparation des performances et du comportement

Petit exemple

<!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>

Copier après la connexion

Les avantages de l'utilisation de CSS3 pour implémenter l'animation

1. (pas d'animation lorsque l'élément est invisible, réduisant l'impact sur l'impact FPS)

2 Le code d'implémentation est relativement simple

3 L'accélération matérielle peut être utilisée

4 N'occupe pas le thread principal

Inconvénients :

1. Mauvaise compatibilité.

2. Le contrôle d'animation n'est pas assez flexible, le processus en cours d'exécution est faible, il ne peut pas attacher une fonction de rappel de liaison, ne peut pas ajouter une fonction de rappel à une position spécifique ou lier un événement de lecture, et il n'y a pas de rapport de progression.

(Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS

)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!