La semaine dernière je vous ai présenté comment créer un texte en dégradé avec uniquement du CSS. Aujourd’hui je vais vous montrer comment animer ce dégradé au survol de la souris.

Le principe

L’élément sur lequel on veut placer un dégradé ne laisse voir qu’une partie de ce dégradé, et on bouge le dégradé au survol de la souris.

Le code

.gradient-text {
    cursor: default;
    
    /* On créé un dégradé radial centré dans le fond */
    background:radial-gradient(circle at 50% 50%, yellow, orange, red);

    /* 
        On fait en sorte que le degradé soit 2x plus large que le conteneur,
        et on le cale à droite
    */
    background-size: 200% 100%;
    background-position: 100% 50%;
    
    background-clip: text; 
    -webkit-background-clip: text;
    color: #0000;
    
    font-weight: bold;
    font-size: 2em;
    
    /* Pour une transition plus douce */
    transition: background-position 2s;
}

.gradient-text:hover {
    background-position: 0% 50%;
}

Résultat

Le petit bonhomme en mousse

Notez qu’il existe plusieurs méthodes pour animer des dégradés. La méthode présentée ici est ancienne.

En effet, il est maintenant possible d’animer des variables CSS en les déclarant avec la notation @property, ce qui permet, par exemple, de n’animer que la position x d’un dégradé.

Cette notation n’est actuellement compatibles qu’avec les navigateurs de la famille Chromium et Safari. Mon petit coeur de fan de Firefox espère que cela sera rapidement implémenté…