Animation ancre de lien en CSS : Un effet moderne en CSS pur

Une ancre HTML permet de diriger rapidement un visiteur vers une section précise d’une page. Mais pourquoi se contenter d’un simple saut parfois brutal lorsque vous pouvez rendre cette navigation beaucoup plus agréable ? Grâce à une animation d’ancre de lien réalisée uniquement en CSS, il est possible de créer un défilement fluide et de mettre en évidence la section ciblée sans utiliser la moindre ligne de JavaScript.

Dans ce tutoriel WebDesign, vous allez apprendre à créer une ancre de lien animée moderne, comprendre le fonctionnement du sélecteur :target et concevoir un effet visuel élégant qui améliorera immédiatement l’expérience utilisateur de vos pages, menus ou tables des matières.

• Rendre vos ancres HTML modernes et agréables à utiliser grâce à un effet visuel qui guide naturellement le regard du visiteur.
• Améliorer l’expérience utilisateur de vos menus, FAQ et tables des matières avec une solution légère fonctionnant sans JavaScript.
• Maîtriser une technique CSS simple et élégante qui apporte immédiatement une touche plus professionnelle à vos pages web.

Lorsque l’on clique sur un lien d’ancrage dans une page web, le navigateur déplace simplement l’utilisateur vers la zone concernée. C’est pratique, mais souvent assez brutal et peu visible. Après tout, si votre visiteur est transporté plusieurs centaines de lignes plus bas dans la page, il peut parfois se demander où il a atterri.

Heureusement, il existe une solution simple et élégante : créer une ancre de lien animée en CSS pur. Grâce à quelques lignes de code, vous pouvez non seulement rendre le défilement plus agréable, mais également mettre en évidence la section ciblée grâce à une animation visuelle.

Nous allons construire un exemple complet, comprendre chaque ligne de code et voir comment personnaliser facilement l’effet selon vos besoins :

Pourquoi animer une ancre de lien ?

Les ancres sont présentes partout sur le Web.

Vous les utilisez peut-être déjà dans :

• une table des matières
• un menu de navigation
• une FAQ
• une documentation technique
• une page très longue comportant plusieurs sections

Par défaut, lorsqu’un visiteur clique sur une ancre, la page saute instantanément vers l’élément cible. Le déplacement fonctionne parfaitement, mais il manque parfois un repère visuel.

Imaginez une page contenant plusieurs dizaines de paragraphes. Après le déplacement, le lecteur arrive au bon endroit, mais il peut mettre quelques secondes à comprendre quelle partie de la page vient d’être ciblée.

• L’ajout d’une animation résout immédiatement ce problème.

L’utilisateur voit apparaître un léger surlignage ou une mise en évidence temporaire de la section concernée. Son regard est naturellement attiré vers la bonne zone.

L’expérience utilisateur devient alors beaucoup plus agréable.

Le résultat final

Notre démonstration comportera :

• un menu contenant plusieurs liens
• plusieurs sections dans la page
• un défilement fluide
• une animation lumineuse avec un flash jaune lorsqu’une section devient active

Le tout fonctionnera uniquement avec HTML et CSS.

Aucun JavaScript ne sera nécessaire.

Création de la structure HTML

Commençons par construire la structure générale de la page.

<nav class="menu">
    <a href="#presentation">Présentation</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

<section id="presentation" class="section">
    <h2>Présentation</h2>
    <p>Contenu de la section.</p>
</section>

<section id="services" class="section">
    <h2>Services</h2>
    <p>Contenu de la section.</p>
</section>

<section id="contact" class="section">
    <h2>Contact</h2>
    <p>Contenu de la section.</p>
</section>

À première vue, ce code est très simple.

Chaque lien possède un attribut href.

Par exemple :

<a href="#services">Services</a>

Le symbole # indique que le lien pointe vers un identifiant (ID) présent dans la page.

De son côté, la section cible possède :

<section id="services">

Le navigateur fait automatiquement le lien entre les deux. Lorsque l’utilisateur clique sur le lien, il est dirigé vers la section correspondante.

C’est le principe même d’une ancre HTML.

Ajouter un défilement fluide

Par défaut, le navigateur effectue un saut instantané.

Pour obtenir un mouvement plus agréable, il suffit d’ajouter une seule propriété CSS.

html {
    scroll-behavior: smooth;
}

Dès qu’une ancre est utilisée dans la page, le navigateur effectue désormais un défilement progressif.

Le visiteur voit alors la page glisser naturellement jusqu’à la destination.

Ce petit détail améliore déjà fortement le confort de navigation.

Styliser les sections

Pour rendre notre démonstration plus visuelle, nous allons ajouter quelques styles.

.section {
    min-height: 500px;
    padding: 40px;
    margin: 50px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

Décomposons rapidement ce code.

La propriété :

min-height: 500px;

crée de grandes sections afin de rendre le déplacement plus visible.

Ensuite :

padding: 40px;

ajoute de l’espace intérieur.

Enfin :

border-radius: 8px;

arrondit légèrement les angles pour obtenir un rendu plus moderne.

Comprendre le sélecteur :target

Nous arrivons maintenant au cœur de notre animation.

Le secret repose sur un pseudo-sélecteur CSS appelé :target.

👉 Tout savoir sur : Le pseudo-sélecteur :target en CSS.

Voici un exemple simple :

.section:target {
    background: yellow;
}

Lorsqu’une section devient la cible de l’URL, le navigateur applique automatiquement ce style.

Par exemple :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

https://monsite.fr/page#services

La section possédant l’identifiant :

id="services"

devient alors la cible active.

Le sélecteur :

:target

permet donc de modifier son apparence.

C’est exactement ce que nous allons exploiter pour créer notre animation.

Déclencher une animation automatique

Nous pouvons maintenant associer une animation à la cible.

.section:target {
    animation: highlight-section 2s ease-out;
}

Traduit en français, cela signifie :

« Lorsque cette section devient la cible, lance l’animation highlight-section pendant deux secondes. »

Le navigateur se charge ensuite du reste. Aucun script supplémentaire n’est nécessaire.

👉 En savoir plus sur : La propriété animation en CSS.

Créer l’animation CSS

Définissons maintenant notre animation.

@keyframes highlight-section {

    0% {
        background-color: #fff59d;
        box-shadow: 0 0 0 10px rgba(255,235,59,0.8);
        transform: scale(1.01);
    }

    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(255,235,59,0);
        transform: scale(1);
    }

}

Prenons quelques secondes pour comprendre ce qui se passe.

Au début de l’animation :

0%

la section reçoit :

• un fond jaune clair
• une ombre lumineuse
• un léger agrandissement

L’effet attire immédiatement l’œil.

Puis, progressivement, nous revenons à l’état normal.

À la fin :

100%

la couleur disparaît, l’ombre s’efface et la taille reprend sa valeur initiale.

Le résultat est élégant et discret. C’est un peu comme si la section disait :

« Bonjour, c’est moi que vous cherchiez ! »

Éviter un problème fréquent avec les menus fixes

Si vous utilisez un menu collé en haut de l’écran, un problème peut apparaître.

La section ciblée risque de se retrouver cachée sous le menu.

Pour éviter cela, ajoutez :

.section {
    scroll-margin-top: 80px;
}

Cette propriété indique au navigateur de laisser une marge supplémentaire lors du défilement.

• Ainsi, le titre reste parfaitement visible.

C’est une petite astuce très utile dans les projets modernes.

Le code complet

Voici maintenant la version complète.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ancre de lien animée</title>

<style>
html {
    scroll-behavior: smooth;
}

/* Menu */
.menu {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    z-index: 100;
}

.menu a {
    text-decoration: none;
    color: #0066cc;
    font-weight: bold;
    margin-right: 20px;
}

.menu a:hover {
    text-decoration: underline;
}

/* Sections */
.section {
    min-height: 500px;
    padding: 40px;
    margin: 50px auto;
    border: 1px solid #ddd;
    border-radius: 8px;

    /* Évite que le titre soit caché sous le menu sticky */
    scroll-margin-top: 80px;
}

/* Animation lors de l'arrivée sur l'ancre */
.section:target {
    animation: highlight-section 2s ease-out;
}

/* Animation */
@keyframes highlight-section {
    0% {
        background-color: #fff59d;
        box-shadow: 0 0 0 10px rgba(255, 235, 59, 0.8);
        transform: scale(1.01);
    }

    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(255, 235, 59, 0);
        transform: scale(1);
    }
}
</style>
</head>
<body>

<nav class="menu">
    <a href="#presentation">Présentation</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

<section id="presentation" class="section">
    <h2>Présentation</h2>
    <p>
        Cette section est atteinte via une ancre animée.
        Cliquez sur les liens du menu pour voir l'effet.
    </p>
</section>

<section id="services" class="section">
    <h2>Services</h2>
    <p>
        Lorsque cette section devient la cible de l'URL
        (#services), l'animation CSS est déclenchée.
    </p>
</section>

<section id="contact" class="section">
    <h2>Contact</h2>
    <p>
        Le défilement est fluide grâce à
        <code>scroll-behavior: smooth;</code>
        et le surlignage est géré par
        <code>.section:target</code>.
    </p>
</section>

</body>
</html>

Personnaliser votre animation

Une fois le principe compris, vous pouvez laisser libre cours à votre créativité.

Par exemple, vous pouvez remplacer le jaune par la couleur principale de votre site.

background-color: #dbeafe;

Vous pouvez également prolonger l’animation :

animation: highlight-section 3s ease-out;

Ou encore accentuer le zoom :

transform: scale(1.03);

L’idée n’est pas forcément d’impressionner votre visiteur avec un feu d’artifice graphique.

• Une animation discrète est plus efficace qu’un effet spectaculaire.

Le but est d’aider l’utilisateur à se repérer dans la page.

Pourquoi cette technique est intéressante ?

Cette méthode présente plusieurs avantages.

• Elle est extrêmement légère.
• Le navigateur n’a pratiquement aucun effort à fournir.
• Elle fonctionne sans JavaScript.

Cela signifie :

• moins de code
• moins de maintenance
• moins de risques d’erreurs

Enfin, elle améliore directement l’expérience utilisateur. Le visiteur comprend immédiatement quelle section a été ciblée.

Sur une longue documentation, une FAQ ou un tutoriel, cette amélioration peut réellement faire la différence.

---

---

Les ancres HTML existent depuis les débuts du Web, mais cela ne signifie pas qu’elles doivent rester austères. Avec quelques lignes de CSS, vous pouvez transformer un simple saut de page en une navigation fluide, moderne et agréable à utiliser.

Le plus intéressant dans cette technique est sa simplicité. Une fois que vous maîtrisez le sélecteur :target, vous découvrez tout un univers de possibilités. Rien ne vous empêche d’imaginer d’autres effets : apparition progressive, bordure animée, changement de couleur, halo lumineux ou encore transition plus sophistiquée.

Je vous encourage d’ailleurs à expérimenter. Modifiez les couleurs, jouez avec les durées d’animation, testez différents effets visuels et observez le résultat. C’est souvent en personnalisant un exemple concret que l’on progresse le plus rapidement en CSS.