Jeu Javascript | Transition et @Keyframe

Général

La propriété « transition » est une propriété apparu dans le CSS3 avec de nombreuses autres comme transform, translate… Toutes ces nouveautés permettent de facilité l’animation et d’alléger les sites en utilisant le CSS au lieu du JavaScript pour les animations.

Utilisation

L’attribut transition doit-être appliqué sur l’objet qui effectue l’animation et non sur le déclencheur (pas sur .madiv:hover par exemple). Il s’applique à un tous les déclencheurs (hover, active, checked…)

Transition accepte plusieurs attributs :

Cas Particuliers

Différentes propriétés avec des animations différentes peuvent se concaténées en ajoutant une virgule entre chaque :

transition : font-size 2s ease, width .5s linear