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 transition-property
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
transition-duration
. - une pause avant le démarrage de la transition Css avec la propriété Css
transition-delay
, la pause de la transition Css est optionnelle. - le "type d'animation" de la transition Css avec la propriété Css
transition-timing-function
.
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 .
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.
<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.
<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.
.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 :
Transitions Css verticales ou horizontales.
Transitions Css de remplissage avec mouvement vertical ou horizontal.
/* 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; }
Transitions Css en diagonales
Transitions Css de remplissage avec mouvement en diagonale.
/* 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%; }
Transitions Css centrées
Transitions Css de remplissage avec mouvement basé sur le centre.
/* 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);}