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 :

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> 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. 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! Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Outils d'IA chauds Undresser.AI Undress Application basée sur l'IA pour créer des photos de nu réalistes AI Clothes Remover Outil d'IA en ligne pour supprimer les vêtements des photos. Undress AI Tool Images de déshabillage gratuites Clothoff.io Dissolvant de vêtements AI AI Hentai Generator Générez AI Hentai gratuitement. Afficher plus Article chaud R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune) 2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌 Repo: Comment relancer ses coéquipiers 4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌 Hello Kitty Island Adventure: Comment obtenir des graines géantes 4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌 Combien de temps faut-il pour battre Split Fiction? 3 Il y a quelques semaines By DDD R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger? 3 Il y a quelques semaines By DDD Afficher plus Outils chauds Bloc-notes++7.3.1 Éditeur de code facile à utiliser et gratuit SublimeText3 version chinoise Version chinoise, très simple à utiliser Envoyer Studio 13.0.1 Puissant environnement de développement intégré PHP Dreamweaver CS6 Outils de développement Web visuel SublimeText3 version Mac Logiciel d'édition de code au niveau de Dieu (SublimeText3) Afficher plus Sujets chauds Où se trouve l'entrée de connexion pour la messagerie Gmail ? 7322 9 Tutoriel Java 1625 14 Tutoriel CakePHP 1350 46 Tutoriel Laravel 1262 25 Tutoriel PHP 1209 29 Afficher plus Related knowledge Comment accélérer les effets d'animation dans Windows 11 : 2 méthodes expliquées Apr 24, 2023 pm 04:55 PM Lorsque Microsoft a lancé Windows 11, de nombreux changements ont été apportés. L'un des changements est une augmentation du nombre d'animations de l'interface utilisateur. Certains utilisateurs souhaitent changer la façon dont les choses apparaissent et doivent trouver un moyen de le faire. Avoir des animations rend le tout plus agréable et plus convivial. L'animation utilise des effets visuels pour rendre l'ordinateur plus attrayant et plus réactif. Certains d'entre eux incluent des menus coulissants après quelques secondes ou minutes. De nombreuses animations sur votre ordinateur peuvent affecter les performances du PC, le ralentir et interférer avec votre travail. Dans ce cas, vous devez désactiver l'animation. Cet article présentera plusieurs façons dont les utilisateurs peuvent améliorer la vitesse de leurs animations sur PC. Vous pouvez utiliser l'Éditeur du Registre ou un fichier personnalisé que vous exécutez pour appliquer les modifications. Comment améliorer les animations dans Windows 11 Animation CSS : comment obtenir l'effet flash des éléments Nov 21, 2023 am 10:56 AM Animation CSS : Comment obtenir l'effet flash des éléments, des exemples de code spécifiques sont nécessaires dans la conception Web, les effets d'animation peuvent parfois apporter une bonne expérience utilisateur à la page. L'effet scintillant est un effet d'animation courant qui peut rendre les éléments plus accrocheurs. Ce qui suit explique comment utiliser CSS pour obtenir l'effet flash des éléments. 1. Implémentation de base de Flash Tout d'abord, nous devons utiliser la propriété d'animation de CSS pour obtenir l'effet flash. La valeur de l'attribut animation doit spécifier le nom de l'animation, le temps d'exécution de l'animation et le temps de retard de l'animation. Effet de transition CSS : comment obtenir l'effet de fondu entrant et sortant des éléments Nov 21, 2023 am 08:03 AM Effet de transition CSS : Comment obtenir l'effet de fondu d'entrée et de sortie des éléments Introduction : Dans la conception Web, donner aux éléments des effets de transition est l'un des moyens importants pour améliorer l'expérience utilisateur. L'effet de fondu entrant et sortant est un effet de transition courant et concis, qui peut faire apparaître des éléments à partir de zéro, du superficiel au profond. Cet article expliquera comment utiliser CSS pour obtenir l'effet de fondu entrant et sortant des éléments, et donnera des exemples de code spécifiques. 1. Utilisez l'attribut de transition pour obtenir l'effet de fondu d'entrée et de sortie de l'élément. L'attribut de transition de CSS peut ajouter des éléments à l'élément. L'animation ne fonctionne pas dans PowerPoint [Corrigé] Feb 19, 2024 am 11:12 AM Essayez-vous de créer une présentation mais vous ne parvenez pas à ajouter une animation ? Si les animations ne fonctionnent pas dans PowerPoint sur votre PC Windows, cet article vous aidera. Il s’agit d’un problème courant dont se plaignent de nombreuses personnes. Par exemple, les animations peuvent cesser de fonctionner lors de présentations dans Microsoft Teams ou lors d'enregistrements d'écran. Dans ce guide, nous explorerons diverses techniques de dépannage pour vous aider à corriger les animations qui ne fonctionnent pas dans PowerPoint sous Windows. Pourquoi mes animations PowerPoint ne fonctionnent-elles pas ? Nous avons remarqué que certaines raisons possibles pouvant entraîner le dysfonctionnement de l'animation dans PowerPoint sous Windows sont les suivantes : En raison de problèmes personnels Comment configurer l'animation ppt pour entrer d'abord puis sortir Mar 20, 2024 am 09:30 AM Nous utilisons souvent ppt dans notre travail quotidien, alors connaissez-vous toutes les fonctions opérationnelles de ppt ? Par exemple : comment définir les effets d'animation dans ppt, comment définir les effets de commutation et quelle est la durée de l'effet de chaque animation ? Chaque diapositive peut-elle être lue automatiquement, entrer puis quitter l'animation ppt, etc. Dans le numéro d'aujourd'hui, je partagerai avec vous les étapes spécifiques d'entrée puis de sortie de l'animation ppt. Elles sont ci-dessous. 1. Tout d'abord, nous ouvrons ppt sur l'ordinateur, cliquez à l'extérieur de la zone de texte pour sélectionner la zone de texte (comme indiqué dans le cercle rouge dans la figure ci-dessous). 2. Ensuite, cliquez sur [Animation] dans la barre de menu et sélectionnez l'effet [Effacer] (comme indiqué dans le cercle rouge sur la figure). 3. Ensuite, cliquez sur [ Après un retard de deux ans, le film d'animation national en 3D 'Er Lang Shen : The Deep Sea Dragon' devrait sortir le 13 juillet. Jan 26, 2024 am 09:42 AM Ce site Web a rapporté le 26 janvier que le film d'animation national en 3D « Er Lang Shen : Le dragon des profondeurs » avait publié une série de dernières images fixes et a officiellement annoncé qu'il sortirait le 13 juillet. Il est entendu que "Er Lang Shen : The Deep Sea Dragon" est produit par Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film. Co., Ltd., Chengdu Le film d'animation produit par Tianhuo Technology Co., Ltd. et Huawen Image (Beijing) Film Co., Ltd. et réalisé par Wang Jun devait initialement sortir en Chine continentale le 22 juillet 2022. . Synopsis de l'intrigue de ce site : Après la bataille des dieux conférés, Jiang Ziya a pris la « Liste des dieux conférés » pour diviser les dieux, puis la liste des dieux conférés a été scellée par la Cour céleste sous la mer profonde de Kyushu Royaume secret. En fait, en plus de conférer des positions divines, il existe également de nombreux esprits maléfiques puissants scellés dans la liste des dieux conférés. Comment utiliser Vue pour implémenter des effets d'animation de machine à écrire Sep 19, 2023 am 09:33 AM Comment utiliser Vue pour implémenter des effets spéciaux d'animation de machine à écrire L'animation de machine à écrire est un effet spécial courant et accrocheur qui est souvent utilisé dans les titres de sites Web, les slogans et autres affichages de texte. Dans Vue, nous pouvons obtenir des effets d'animation de machine à écrire en utilisant les instructions personnalisées de Vue. Cet article présentera en détail comment utiliser Vue pour obtenir cet effet spécial et fournira des exemples de code spécifiques. Étape 1 : Créer un projet Vue Tout d'abord, nous devons créer un projet Vue. Vous pouvez utiliser VueCLI pour créer rapidement un nouveau projet Vue, ou manuellement Le PV final de l'animation principale 'Arknights: Winter Hidden Return' a été annoncé et sera lancé le 7 octobre. Sep 23, 2023 am 11:37 AM Le contenu qui doit être réécrit sur ce site est : 9 Le contenu qui doit être réécrit est : Mois Le contenu qui doit être réécrit est : 23 Le contenu qui doit être réécrit est : Daily News, le drame principal de la deuxième saison de la série animée "Arknights" "Arknights : Winter Hidden Return" est sortie. Le contenu qui doit être réécrit est : PV Le contenu qui doit être réécrit est : 10. Le contenu qui doit être réécrit. est : 7. Le contenu qui doit être réécrit est : 7 Le contenu est : Le contenu qui doit être réécrit est : 00:23 Le contenu qui doit être réécrit est : Officiellement lancé, cliquez ici pour accéder au site officiel de le thème. Le contenu qui doit être réécrit est le suivant : Ce site a remarqué que "Arknights : Winter Hidden Return" est la suite de "Arknights : Prelude to Dawn". Le résumé de l'intrigue est le suivant : Afin de prévenir les infectés, un groupe de See all articles Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！ À propos de nous Clause de non-responsabilité Sitemap © php.cn All rights reserved