Une transition CSS se joue une seule fois entre l'état A et l'état B d'un élément, elle attend donc un événement pour se déclencher (:hover, class ajoutée en javascript...).
|
Propriété raccourcie des transitions CSS. color est la propriété sur laquelle agir 0.5s est la durée en secondes de la transition ease-in est la courbe d'animation 1s est le délai en seconde avant le début de la transition |
|
Il est possible de combiner des transitions sur des propriétés différentes d'un même élément |
Plus d'infos sur les transitions
Une animation CSS se déclenche au chargement de la page et peut être paramètrée avec des images-clés, des loops...
Elle s'active sur l'élément désiré et doit être définie plus bas dans le CSS par un
@keyframe
|
Propriété raccourcie des animations CSS. monanim est le nom au choix donné à l'animation 4s est la durée de base en secondes de l'animation ease-in-out est la courbe d'animation 1s est le délai en seconde avant le début de l'animation 3 est le nombre de répétitions de l'animation |
|
Définition d'une animation CSS. Il y a ici 4 images clés, la première à 0% est l'état initial à 50% de l'animation (50% de 4s = 2s), le padding-top change à 75% de l'animation (75% de 4s = 3s), la couleur change à 100% de l'animation, tout revient à l'état initial puis l'ensemble recommence encore 2 fois car on a demandé 3 répétitions en tout. |