Quelle est la différence entre transition et animation en CSS3

La différence entre transition et animation dans CSS3 : 1. La transition CSS nécessite le déclenchement d'un événement, mais pas l'animation CSS ; 2. La transition CSS n'a qu'un ensemble (deux) d'images clés, qui définissent respectivement les actions de début et de fin, tandis que L'animation CSS peut définir plusieurs images clés.

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

transition transition

rendez les modifications CSS plus fluides

property:

property	description
transtion-property	Préciser les propriétés de la transition
transtion- durée	Spécifiez le temps requis pour la transition
transtion-timing-function	Spécifiez la fonction de transition
transtion-delay	Spécifiez le temps de retard de transition

Syntaxe :

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

Châtaigne :

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

transition L'avantage est qu'il est simple et facile à utiliser, mais il présente plusieurs limitations majeures.

• La transition doit être déclenchée par un événement, elle ne peut donc pas se produire automatiquement lorsque la page Web est chargée.
• La transition est un événement ponctuel et ne peut se produire de manière répétée à moins d'être déclenchée encore et encore.
• La transition ne peut définir que l'état de départ et l'état final, mais pas l'état intermédiaire.
• Une règle de transition ne peut définir des modifications que sur un seul attribut et ne peut pas impliquer plusieurs attributs.

CSS Animation a été proposé pour résoudre ces problèmes. "animation animation"

Précisez le nom de l'animation d'image clé

animation-durée

Spécifiez le temps requis pour la lecture de l'animation, en secondes

animation-timing-functionanimation-delaySpécifiez animation Heure de début, en secondesSpécifie le nombre de fois que l'animation est jouée, la valeur par défaut est 1, si elle est infinie, elle sera jouée en boucle infinieSpécifie le sens de lecture de l'animation, La valeur par défaut est normale. Si elle est alternative, elle sera jouée à l'envers à tour de rôle La production d'animation est divisée en deux parties : Déclarer une animation. avec des images clésAppelez l'animation déclarée avec des images clés dans l'animation. @keyframes sont des images clés Il peut y avoir plusieurs images dans une animation. Une règle de style dans @keyframes est composée de plusieurs pourcentages. Plusieurs pourcentages peuvent être créés sur cette règle pour obtenir un effet en constante évolution. Chestnut : Les signes de pourcentage entre 0% et 100% dans le code ci-dessus ne peuvent pas être omis, 0% peut être remplacé par from et 100% peut être remplacé par to. Pour que l'animation mychange ait un effet, elle doit être appelée via la propriété d'animation CSS3.

Spécifiez la méthode de lecture de l'animation
	animation-iteration-count
	animation -direction
	<style> img{ width:90px; height:90px; animation: mychange 1s infinate 1s; -webkit-animation: mychange 1s infinate 1s; } @keyframes mychange{ 0%{width:90px; height:90px; } 50%{width:130px; height:130px;} 100%{width:200px; height:200px;} } @-webkit-keyframes mychange{ 0%{width:90px; height:90px; } 50%{width:130px; height:130px;} 100%{width:200px; height:200px;} } </style>

La différence entre la transition CSS et l'animation

• La principale différence est que la transition doit déclencher un événement pour modifier ses propriétés CSS au fil du temps ; Il est temps d'obtenir un effet d'animation.

1) La transition CSS doit être déclenchée par un événement (comme :hover, etc.) pour fonctionner, mais pas l'animation.

• 2) La transition n'a qu'un seul ensemble (deux : début-fin) d'images clés, et l'animation peut définir plusieurs images clés.

3) Utilisez des transitions et des animations pour créer un effet dynamique lorsque la souris survole. Lorsque la souris est éloignée, l'effet créé par la transition reprendra lentement son apparence d'origine, tandis que l'animation reviendra soudainement à son apparence d'origine. aspect original.

(Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS

,

Tutoriel d'introduction au front-end Web

)

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!