Les transitions CSS – 5 exemples prêts à l’emploi

Depuis la sortie de la spécification CSS3, les transitions permettent aux concepteurs Web et aux développeurs Web frontaux de créer des animations étonnantes sans utiliser JavaScript. Dans cet article, nous passerons en revue 5 exemples étonnants et prêts à l’emploi de ce que vous pouvez faire avec les transitions CSS3.

Qu’est ce que des transitions CSS ?

Introduite il y a quelques années avec la spécification CSS3, la propriété de transition permet aux développeurs frontaux de modifier en douceur la valeur des propriétés sur une période donnée.

A partir de 2019, les transitions sont bien supportées par les navigateurs modernes. Les navigateurs plus anciens peuvent encore prendre en charge cette fonctionnalité, si vous utilisez des préfixes comme -webkit-, -moz-, ou -o-. Veuillez consulter la section Can I Use pour plus d’informations sur la compatibilité des navigateurs.

Si vous avez besoin de plus d’informations sur les transitions CSS, W3 Schools a un article concis qui vous apprendra ce que vous devez savoir pour commencer.

Changement de couleur de fond en douceur

Un effet simple, mais commun à de nombreux sites Web modernes, est d’avoir un changement de couleur de fond en douceur au survol. Commençons par ce simple morceau de HTML : Changer la couleur

Change Color

Et maintenant c’est l’heure de la magie CSS. Notez la propriété de transition à la ligne 12, qui anime notre en survol.

div.color {     margin: 121px 149px;     width: 483px;     height: 298px;     background: #676470;     color: #fff;     font-family: Lato;     font-weight: 900;     font-size: 3.4em;     text-align: center;     line-height: 298px;     transition: all 0.3s ease; }  div.color:hover {     background: #53a7ea; }

Transition sophistiquée sur le background

Un exemple plus sophistiqué, démontrant combien il est facile d’animer un arrière-plan avec CSS3. Voici le HTML :

Et le code CSS correspondant, où vous pouvez repérer l’utilisation de la transition ainsi que la transformation, pour des animations plus sophistiquées.

.circle { 	border-radius: 50%; 	left: calc(50% - 6.25em); 	top: calc(50% - 12.5em); 	transform-origin: 50% 12.5em; 	width: 12.5em; 	height: 12.5em; 	position: absolute; 	box-shadow: 0 1em 2em rgba(0, 0, 0, .5); }  .one, .three { 	background: rgba(142, 92, 205, .75); 	transition: background 1s ease-in; }  .two, .four { 	background: rgba(236, 252, 100, .75); }   .one { 	transform: rotateZ(0); }  .two { 	transform: rotateZ(90deg); }  .three { 	transform: rotateZ(180deg); }  .four { 	transform: rotateZ(-90deg); }  .circle:hover {   background: rgba(142, 92, 205, .25); }

Bordures de dégradé CSS et boutons d’angle arrondis

Voici un bouton avancé, super beau, fait entièrement en CSS3. Le HTML est très simple :

   A button! 

Le code CSS est un peu plus complexe et démontre toute la puissance du CSS3 :

body {   background: #e7e8e9;   padding: 40px; }  .btn { 	background-image: linear-gradient(to right, #006175 0%, #00a950 100%); 	border-radius: 40px;   box-sizing: border-box; 	color: #00a84f; 	display: block; 	font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/ 	height: 80px; 	letter-spacing: 1px; 	margin: 0 auto; 	padding: 4px; 	position: relative;   text-decoration: none; 	text-transform: uppercase; 	width: 264px; 	z-index: 2; }  .btn:hover { 	color: #fff; }  .btn span { 	align-items: center; 	background: #e7e8e9; 	border-radius: 40px; 	display: flex; 	justify-content: center; 	height: 100%; 	transition: background .5s ease; 	width: 100%; }  .btn:hover span { 	background: transparent; }

Différentes transitions de hover

Les transitions peuvent être différentes pour les états de survol activé et désactivé, comme le montre le HTML suivant :

Buy Now!

…et son CSS :

#thing {    padding: 10px;    border-radius: 5px;    background-color:blue;    color:white;    /* HOVER OFF */    -webkit-transition: padding 2s; }  #thing:hover {    padding: 20px;    border-radius: 15px;    /* HOVER ON */    -webkit-transition: border-radius 2s; }

Survolez un élément pour en affecter un autre

Terminons ce tour d’horizon par un exemple intéressant sur la façon dont nous pouvons survoler un élément pour en affecter un autre. Commençons par créer deux conteneurs HTML :

#box1
 
#box2

Voyons maintenant le CSS :

#box2 {     position: absolute;     left: 120px;     background: blue;     -webkit-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     transition: 1s ease-in-out; }   #box1:hover + #box2 {     -webkit-transform: rotate(360deg);     -moz-transform: rotate(360deg);     -o-transform: rotate(360deg);     -ms-transform: rotate(360deg);     transform: rotate(360deg);     left: calc(100% - 102px);     background: yellow; }

Conclusion

Pour conclure, il existe des multitudes de transitions et effets en CSS3 et il serait fort dommage de s’en priver ! Mon conseil : expérimentez expérimentez expérimentez ! Vous n’allez pas revenir de tout ce que CSS peut faire pour vous