Comment jouer avec l'animation CSS ? (organiser et partager)

Cet article vous apporte des connaissances pertinentes sur l'animation en CSS, y compris ce qu'est l'animation, comment appeler l'animation et comment implémenter une animation multi-images clés. J'espère qu'il vous sera utile.

1. Qu'est-ce que l'animation

En CSS, vous pouvez utiliser @keyframes pour définir l'animation
(les images clés signifient "images clés")

structure approximative :

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

---

2. une animation est définie, elle peut être appelée en utilisant la propriété animation.

attributs de base de l'animation :

name : le nom de l'animation

(valeur par défaut initiale aucune)
• 
  durée : durée de l'animation
(valeur par défaut initiale 0s)
• 
  fonction de synchronisation : changement de courbe de vitesse
(valeur par défaut initiale facilité )
• 
  delay : temps de retard (combien de temps s'écoule avant le début de l'animation)
(valeur initiale par défaut 0s)
• 
  iteration-count : nombre d'exécutions d'animation
(valeur initiale par défaut 1, si vous souhaitez que l'animation s'exécute pour toujours, écrire infini)
• 
  

  animation:  name | duration | timing function | delay | iteration-count;

sauf De plus, il y a quelques attributs :

animation-direction (définir s'il faut lire l'animation à l'envers à tour de rôle)

normal : lire l'animation de la manière normale (par défaut initial valeur)

• reverse : jouer dans le sens inverse Animation
• alternate : Que le 2ème, le 4ème, le 6ème... (fois pair) de l'animation soit automatiquement inversé
• alternate-reverse : Que le nombre impair soit inversé. les temps de l'animation seront automatiquement inversés.
• 
  

animation-fill-mode (définir comme animation L'état de l'animation lorsqu'elle n'est pas en cours de lecture)

aucun : Ne modifiez pas le comportement par défaut de l'animation

• forwards : Arrêtez l'animation à l'état final final
• en arrière : appliquez la première animation dans le délai spécifié par le délai d'animation. Styles dans les images clés
• les deux : suivez les règles de l'avant et de l'arrière en même temps
• 
  

animation -play-state (définir si l'animation est lue ou en pause)

pause : mettre en pause la lecture de l'animation

• en cours d'exécution : lecture normale Animation

3. Animation multi-images clés

---

Pour les animations qui le souhaitent. Pour obtenir plusieurs effets, vous pouvez utiliser plusieurs images clés à ce moment-là.

Structure générale :

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

(Partage vidéo 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!