Étapes de mise en œuvre de la technologie d'animation en CSS3

Si vous avez besoin d'obtenir des effets d'animation en CSS3, trois technologies seront utilisées : transform-origin, transition, transition-delay et transition-timing-function. Aujourd'hui, je vais vous donner une idée claire et voir comment obtenir des effets d'animation. .

1. transform-origin

L'origine de la transformation CSS est le point central de l'objet par défaut. transform-origin accepte deux paramètres, qui peuvent être des valeurs spécifiques telles que pourcentage, em, px, etc., ou des mots-clés tels que gauche, droite, centre, haut, milieu, bas, etc.

Par exemple :

transform-origin : en haut à droite;-o-transform-origin : en haut à droite;-moz-transform-origin : en haut à droite;-webkit-transform-origin : en haut à droite ;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin : 0 100 %;-o-transform-origin : 0 100 %;-moz-transform-origin : 0 100%;-webkit-transform-origin : 0 100%;

transform- origine : 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

2 . transition--Transition

1.transition-property : Le nom de la propriété CSS qui définit l'animation de transition. Peut être aucun|tout|liste de propriétés CSS.

Par exemple :

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition- property :background-color;

2.transition-duration : Définit la durée de l'animation de transition.

Par exemple :

durée-transition : 3s;-o-durée-transition : 3s;-moz-durée-transition : 3s;-webkit-durée-transition : 3s;

3.transition-delay : Définissez le temps de retard de l'animation de transition.

Par exemple :

délai de transition : 3 s;-o-délai de transition : 3 s;-moz-délai de transition : 3 s;-webkit-délai de transition : 3 s;

4.transition-timing-function : Définir l'effet de l'animation de transition.

La valeur peut être :

facilité : effet de relief.

easy-in : Effet dégradé.

ease-out : effet de fondu.

ease-in-out : effet de fondu d'entrée et de sortie.

linéaire : effet linéaire.

cubic-bezier : effet spécial courbe de Bézier cubique. cubique-bézier(0,3, 0, 0,5, 1,0).

Par exemple :

fonction de synchronisation de transition : linéaire ; -o-fonction de synchronisation de transition : linéaire ;-fonction de synchronisation de transition moz : linéaire ;-webkit-transition- timing -function : linéaire ;

3. animation

1. animation-name : nom de l'animation.

2.animation-durée : durée de l'animation.

3.animation-timing-function : méthode de lecture d'animation.

4.animation-delay : heure de début de l'animation.

5.animation-iteration-count : Nombre de lectures. infini signifie des temps infinis. .

6.animation-direction : direction de lecture de l'animation. normal : chaque cycle de l'animation avance alternativement : les temps pairs en avant, les temps impairs en arrière.

Par exemple :

div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres cas connexes. articles sur le site php chinois !

Lecture connexe :

Introduction détaillée de CSS3 à l'attribut background-size

Introduction détaillée de CSS3 à l'attribut de traduction

Introduction détaillée à l'attribut filter de CSS3

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!