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.
CSS Animation a été proposé pour résoudre ces problèmes. "animation animation"
Précisez le nom de l'animation d'image clé| Spécifiez la méthode de lecture de l'animation | |
|---|---|
| animation-iteration-count | |
| animation -direction | |
| La production d'animation est divisée en deux parties : | |
| Déclarer une animation. avec des images clés | |
| @keyframes sont des images clés Il peut y avoir plusieurs images dans une animation. | |
| Chestnut : | <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>Copier après la connexion La différence entre la transition CSS et l'animation
(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!
Article précédent：Que signifie box-shadow en CSS3
Article suivant：Quelle est l'unité de degré en CSS3 ?
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
Derniers articles par auteur
Derniers numéros
javascript - Où puis-je voir le document d'interface d'animation pour js appelant CSS3?
Depuis 1970-01-01 08:00:00
0
0
0
Comment obtenir une trajectoire de mouvement en forme d'arc en CSS3
Depuis 1970-01-01 08:00:00
0
0
0
Rubriques connexes
Plus>
|
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
