Transition CSS

J'utilise souvent, pour les animations, une écriture simplifiée pour les animations de mes montages (transition:all 1s linear;) ce qui provoque l'animation simultanée des différents attributs.

Survol

<div style="height: 250px; ">
<p id="rep1">&nbsp;</p>
</div>
<style><!--
#rep1{width:160px; height:90px; border:4px solid white; background:red; transform:translate(100px,50px); filter:grayscale(1); transition:all 1s linear;}
#rep1:hover{width:240px; height:135px; border:6px solid yellow; transform:translate(100px,50px) rotate(20deg); border-radius:40px; filter:grayscale(0);}
--></style>

Nous pouvons vouloir que les attributs ne soient pas animés selon les mêmes paramètres et, dans ce cas, nous devons écrire la transition pour chacun d'eux, en ajoutant la valeur du retard de chacun par rapport au départ de l'animation.

Nous pouvons vouloir que les attributs ne soient pas animés selon les mêmes paramètres et, dans ce cas, nous devons écrire la transition pour chacun d'eux, en ajoutant la valeur du retard de chacun par rapport au départ de l'animation.

<div style="height: 250px; ">
<p id="rep2">&nbsp;</p>
</div>
<style><!--
#rep2{width:160px; height:90px; border:4px solid white; background:red; transform:translate(100px,50px); filter:grayscale(1); transition:width 1s linear 0s, height 1s linear 0s, border 1s linear 0s, transform 1s linear 1s, border-radius 1s linear 2s, filter 1s linear 3s;}
#rep2:hover{width:240px; height:135px; border:6px solid yellow; transform:translate(100px,50px) rotate(20deg); border-radius:40px; filter:grayscale(0);}
--></style>

En écrivant des codes, je me suis aperçu qu'on pouvait simplifier le code pour les animations en regroupant celles à même animation et en ajoutant celles qui ont d'autres paramètres:

<div style="height: 250px; ">
<p id="rep3">&nbsp;</p>
</div>
<style><!--
#rep3{width:160px; height:90px; border:4px solid white; background:red; transform:translate(100px,50px); filter:grayscale(1); transition:all 1s linear 0s, transform 1s linear 1s, border-radius 1s linear 2s, filter 1s linear 3s;}
#rep3:hover{width:240px; height:135px; border:6px solid yellow; transform:translate(100px,50px) rotate(20deg); border-radius:40px; filter:grayscale(0);}
--></style>

Transition:all 1s linear 0s; reprend les paramètres de width(largeur), de hauteur(height) et de bordure(border) ce qui simplifie l'écriture.

Bien sûr, si vous ne voulez faire varier en retard, que le filtre, le code sera encore plus simple:

 transition:all 1s linear 0s, filter 1s linear 1s;