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

<div class="color">Change Color</div>

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;
}
Change Color

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 :

<div class="container">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
</div>

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 class="btn" href="#">
  <span>A button!</span>
</a>

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;
}
A button!

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 :

<a id="thing" href="#">Buy Now!</a>

…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;
}
Buy Now!

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 :

<div id="box1">#box1</div>
<div id="box2">#box2</div>

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;
}
#box1
#box2

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 😉

Catégories : html/css

siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

2 commentaires

Jean-Max · 18 février 2019 à 8 h 45 min

Très bon article. Dommage de ne pas avoir de démo pour voir ce que ça donne directement

    siddhy · 18 février 2019 à 10 h 25 min

    Merci ça fait plaisir ! En effet j’y ai pensé mais il faut que je réfléchisse à comment je peux insérer les exemples directement dans mon article. (J’avais pas envie de mettre des GIFs donc il faut que je vois comment faire ça simplement sans avoir besoin d’ouvrir mon éditeur, GIT, FTP …etc) Merci pour le conseil et pour avoir lu mon article en tous cas ! Bonne journée

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *