Maison >interface Web >Questions et réponses frontales >Quels sont les avantages de l'animation en CSS3
Quels sont les avantages de l'animation en CSS3
- 青灯夜游original
- 2022-01-13 16:04:421873parcourir
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.
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>
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 CSSCe 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!