Maison > Article > interface Web > É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!