Transition sur dégradés CSS

Introduction

Parce que les dégradés CSS ne sont pas animables. Parce que la vie (d'un développeur) est injuste.

Il fallait bien prendre les armes et lutter. Nous allons voir quelques petites astuces pour contrer le problème.

Les pseudo-éléments

Sans aucun doute la manière la plus efficace pour réussir une transition sur un dégradé. On sait que les pseudo-éléments peuvent être très utiles en CSS. La preuve en est ici puisque nous allons nous servir du pseudo-élément ::before.

L'idée étant de cacher un dégradé avec la propriété opacity. L'empilement avec la propriété z-index est utile si un texte (ou un autre élément) est présent comme dans cet exemple afin de ne pas le recouvrir avec le dégradé lors de la transition.

.demo2 {

display: flex;
justify-content: center;
max-width: 12rem;
color: white;
margin: 2rem auto;
padding: 1rem;
border-radius: .25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.19);
background-image: linear-gradient(#6753ea,#3cddc4);
position: relative;
z-index: 0;

}
	
.demo2::before{

border-radius: inherit;
background-image:linear-gradient(to top,#6753ea,#3cddc4);
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity 1s 
}

.demo2:hover::before {

opacity: 1

}

Utilisation de la position de l'arrière-plan

L'idée ici est d'utiliser la propriété background-position de manière à jouer avec le déplacement de l'arrière-plan, donnant plus ou moins bien l'illusion d'une transition. Au préalable, il faudra étendre l'arrière-plan avec la propriété background-size.

.demo3 {

display: flex;
justify-content: center;
max-width: 12rem;
color: white;
margin: 2rem auto;
padding: 1rem;
border-radius: .25rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.19);
background-size: auto 200%;
transition:  background-position .4s;
background-image: linear-gradient( #3cddc4 0%, #6753ea 51%, #3cddc4 100%)
}
	
.demo3:hover{
  
background-position: bottom center;
	
}

Utilisation des ombres portées

Une bonne solution au même titre que les pseudo-éléments, à la différence que la propriété box-shadow n'est pas idéale au niveau des performances lors d'une transition. Il faudra également définir une hauteur fixe à l'élément qui reçoit la transition car la propriété box-shadow n'accepte pas les pourcentages.

.demo4{

display: flex;
justify-content: center;
border-radius: .25rem;
color: white;
max-width: 12rem;
margin: 2rem auto;
height: 50px;
background-color: #6753ea;
box-shadow: 0 50px 25px -25px #3cddc4 inset; 
transition: 1s;
}
	
.demo4:hover{

    background-color: #3cddc4;
    box-shadow: 0 50px 25px -25px #6753ea inset; 
}

Bonus 1 : Utilisation de la règle@ CSS @property (CSS Houdini)

Cette règle CSS représente une inscription de propriété personnalisée (Custom properties) au sein d'une feuille de style sans avoir recours à du JavaScript.

.demo6{
display: flex;
justify-content: center;
border-radius: .25rem;
color: white;
max-width: 12rem;
margin:2rem auto;
box-shadow:0 0 5px rgba(0, 0, 0, 0.19);
}
	
@property --transition-deg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
	
.demo6{

--transition-deg:0deg;
  transition:--transition-deg 1s;
  background:linear-gradient(var(--transition-deg),#6753ea,#3cddc4);

	}
	

	
	
.demo6:hover{
		
		--transition-deg:180deg;
	
	}

Bonus 2 : avec CSS Houdini et JS

Cela nécessite quelques lignes de JavaScript et ce n'est pas compatible sur tous les navigateurs à l'heure actuelle (voir date mise à jour du tutoriel en haut de page).

.demo5{

--color-stop: #6753ea;
max-width: 12rem;
display: grid;
place-items: center;
padding:1rem;
margin: 2rem auto;
border-radius: .25rem;
background-image: linear-gradient(#3e9ed9, var(--color-stop));
transition: --color-stop 1s;
box-shadow:0 0 5px rgba(0, 0, 0, 0.19);

	}
	
.demo5:hover {

  --color-stop: #3cddc4;
}

CSS.registerProperty({
name: '--color-stop',
syntax: '<color>',
inherits: false,
initialValue: 'transparent'
		})

Source, inspiration, ressources :

Article sur le sujet ^(FR)

Article sur @property ^(EN)