Les transitions CSS - FAQ CSS

Comment faire une transition en Css?

Faire une transition grâce aux feuilles de style Css

Vous pouvez en feuille de style Css spécifier des transitions Css pour une ou des propriétés Css. Pour cela vous devez utiliser la feuille de style Css qui permet de spécifier les propriétés sur lesquelles vous voullez une transition Css.
Vous devrez aussi spécifier :

  • la durée de la transition Css avec la propriété Css .
  • une pause avant le démarrage de la transition Css avec la propriété Css , la pause de la transition Css est optionnelle.
  • le "type d'animation" de la transition Css avec la propriété Css .
Exemple de déclaration d'une transition Css : 
transition: width 5s linear  ;
/* Propriétés individuelles de transition Css */
transition-property : width;
transition-timing-function : linear;
transition-duration : 5s

Vous trouverez un article complet sur la manière de concevoir des transitions en CSS3 .

Concevoir des transitions CSS3

Exemples de transitions Css

Transitions Css de remplissages

Les exemples de transitions Css de remplissage pour vous monter les diverses possibilités.
Nous partons du principe que nous n'ajoutons pas de code HTML, nous ne travaillons que sur la balise DIV
HTML par défaut de chaque élément dans lequel se passe la transition Css.

Code HTML de base des éléments de la transition Css : 
<div class="[CLASS-DE-TRANSITION] bloc-couleur couleur-remplissage">   
</div>

[CLASS-DE-TRANSITION] : texte affiché dans l'élément. si la classe est de type tow-* il faut ajouter la classe bloc-double.
Pour faire en sorte que la position du texte soit au-dessus de la transition Css.

Code HTML pour changer z-index des éléments de la transition Css : 
<input type="checkbox" name="enarriere" id="enarriere"> <label for="enarriere">Effet derrière le texte</label>

Css par défaut de chaque élément dans lequel se passe la transition Css.

Code Css de base des éléments de la transition Css : 
.bloc-couleur {
  display:inline-block; width:150px; height:150px;
  border:1px solid grey;
  position:relative;  
  overflow:hidden;
  text-align:center;
  vertical-align:middle;
  line-height:150px;
}
.bloc-double:before,
.couleur-remplissage:after{
  content:'';  display:block;
  position:absolute; bottom:0; top:0; left:0; right:0; z-index:1;
  background-color: rgb(171,220,40);
  transition : 0.35s ease-in-out;
  transition-property : top, bottom, left,right, border-width;
}
#enarriere:checked ~ .bloc-couleur div{
  position:relative; z-index:3;
}

Vous trouverez les codes HTML et Css complet de ces exemples voir plus sur Codepen :

Exemples de transitions CSS3

Transitions Css verticales ou horizontales.

Transitions Css de remplissage avec mouvement vertical ou horizontal.

Code à ajouter pour la transition Css : 
/* Transition Css de bas en haut */ 
.to-top:after{ top:100%; }
.to-top:hover:after{ top:0%; }

/* Transition Css de haut en bas */ 
.to-bottom:after{ bottom:100%; }
.to-bottom:hover:after{ bottom:0; }

/* Transition Css de haut et bas vers le centre */ 
.tow-vertical:before{ bottom:100%; }
.tow-vertical:hover:before{ bottom:49%; }
.tow-vertical:after{ top:100%; }
.tow-vertical:hover:after{ top:49%; }

/* Transition Css de droite vers gauche et gauche vers droite */ 
.tow-vertical-inverse:before{ right:100%; bottom:49%; }
.tow-vertical-inverse:hover:before{ right:0%; }
.tow-vertical-inverse:after{ left:100%; top:49%; }
.tow-vertical-inverse:hover:after{ left:0%; }

/* Transition Css de droite à gauche */ 
.to-left:after{ left:100%; } 
.to-left:hover:after{ left:0; }

/* Transition Css de gauche à droite */ 
.to-right:after{ right:100%;}
.to-right:hover:after{ right:0; }

/* Transition Css de droite et gauche vers le centre */ 
.tow-horizontal:before{ right:100%; }
.tow-horizontal:hover:before{ right:49%; }
.tow-horizontal:after{ left:100%; }
.tow-horizontal:hover:after{ left:49%; }

/* Transition Css de haut vers centre et bas vers centre */ 
.tow-horizontal-inverse:before{ right:49%; bottom:100%; }
.tow-horizontal-inverse:hover:before{ bottom:0; }
.tow-horizontal-inverse:after{ left:49%; top:100%; }
.tow-horizontal-inverse:hover:after{ top:0; }

to-top
to-bottom
tow-vertical
tow-vertical-inverse
to-left
to-right
tow-horizontal
tow-horizontal-inverse

Transitions Css en diagonales

Transitions Css de remplissage avec mouvement en diagonale.

Code à ajouter pour la transition Css : 
/* Transition Css du coin bas droit au coin haut gauche */ 
.to-left-top:after{ left:100%; top:100%; }
.to-left-top:hover:after{ left:0; top:0;}

/* Transition Css du coin bas gauche au coin haut droit */ 
.to-right-top:after{ right:100%; top:100%; }
.to-right-top:hover:after{ right:0; top:0; }

/* Transition Css du coin haut droit au coin bas gauche */ 
.to-left-bottom:after left:100%; bottom:100%; }
.to-left-bottom:hover:after{ left:0; bottom:0; }

/* Transition Css du coin haut gauche au coin bas droit*/ 
.to-right-bottom:after{ right:100%; bottom:100%; }
.to-right-bottom:hover:after{ right:0; bottom:0; }

/* Transition Css du coin haut gauche au coin bas droit et du coin bas droit au coin haut gauche */ 
.tow-lt-br:before{ right:100%; bottom:100%; }
.tow-lt-br:hover:before{ right:0%; bottom:0%; }
.tow-lt-br:after{ left:100%; top:100%; }
.tow-lt-br:hover:after{ left:0%; top:0%; }

/* Transition Css du coin haut droit au coin bas gauche et du coin bas gauche au coin haut droit */ 
.tow-rt-lb:before{ left:100%; bottom:100%; }
.tow-rt-lb:hover:before{ left:0%; bottom:0%; }
.tow-rt-lb:after{ right:100%; top:100%; }
.tow-rt-lb:hover:after{ right:0%; top:0%; }

to-left-top
to-right-top
to-left-bottom
to-right-bottom
tow-lt-br
tow-rt-lb

Transitions Css centrées

Transitions Css de remplissage avec mouvement basé sur le centre.

Code à ajouter pour la transition Css : 
/* Transition Css du centre vers la droite et la gauche */ 
.from-center:after{ right:50%; left:50%; }
.from-center:hover:after{ right:0; left:0; }

/* Transition Css du centre vers le haut et le bas */
.from-middle:after{ bottom:50%; top:50%; }
.from-middle:hover:after{ bottom:0; top:0;}

/* Transition Css du centre vers les côtés */
.from-center-middle:after{ bottom:50%; top:50%; right:50%; left:50%; }
.from-center-middle:hover:after{ bottom:0; top:0; right:0; left:0; }

.to-center-middle:after{
  border:0px solid rgb(171,220,40);
  background-color: transparent;
  box-sizing : border-box;  
}
.to-center-middle:hover:after{
  /* taille du plus grand coté / 2 */
  border-width:76px;
}

/* Transition Css du centre horizontal vers la gauche */
.to-middle-top:after{ transform : skew(90deg, 0deg); transition-property : transform; }
.to-middle-top:hover:after{ transform : skew(0deg, 0deg); }

/* Transition Css du centre vertical vers la gauche */
.to-center-left:after{ transform : skew(0deg,90deg); transition-property : transform; }
.to-center-left:hover:after{ transform : skew(0deg, 0deg); }

/* Transition Css du centre rond vers les côtés */
.to-center-middle-circle:after{
 border-radius:100%;
  /* 213px diagonale */
  width:213px; height:213px;
  left:50%; top:50%; 
  transform : translate(-50%, -50%) scale(0, 0);
  box-sizing : border-box; 
  transition-property :transform;
}
.to-center-middle-circle:hover:after{ transform :translate(-50%, -50%) scale(1, 1);}

from-center
from-middle
from-center-middle
to-center-middle
to-middle-to
to-center-left
to-center-middle-circle