5 exemples de notification animée en CSS

Vous voulez ajouter une notification CSS moderne à votre site, sans JavaScript complexe ni bibliothèque externe ? Avec quelques lignes bien pensées, vous pouvez créer une notification animée élégante, fluide et professionnelle.

• Maîtriser les bases essentielles pour créer une notification CSS élégante et professionnelle sans dépendre de bibliothèques externes.
• Donner du dynamisme à vos interfaces grâce à des animations fluides qui améliorent l’expérience utilisateur.
• Comprendre comment structurer et styliser différents types de notifications animées pour adapter facilement le design à vos propres projets.

Dans ce tutoriel, nous allons voir ensemble 5 exemples concrets de toast ou notifications animées en CSS. Chaque exemple aura un design différent, travaillé, et surtout expliqué pas à pas. Si vous débutez, ne vous inquiétez pas : je vais vulgariser chaque principe pour que vous compreniez vraiment ce que vous faites.

Comprendre ce qu’est une notification CSS

Avant de plonger dans le code, clarifions une chose : Une notification CSS (souvent appelée “toast”) est un petit message visuel qui apparaît temporairement pour informer l’utilisateur :

• Succès d’un formulaire
• Erreur de validation
• Ajout au panier
• Message système
• Confirmation d’action

Une notification animée rend l’expérience plus fluide. Elle glisse, apparaît en fondu, rebondit légèrement… bref, elle vit.

En CSS, on joue principalement avec :

• position: fixed
• transform
• opacity
• animation
• @keyframes
• transition

Chaque exemple ci-dessous utilisera ces principes, mais avec un style différent.

Notification CSS minimaliste en slide

Commençons simple. Une notification animée qui glisse depuis le bas à droite.

Objectif visuel

Une carte élégante, avec un léger flou en arrière-plan, qui apparaît en glissant vers le haut.

Commençons par la structure HTML :

<div class="toast toast-success">
  <p>Votre message a été envoyé avec succès.</p>
</div>

C’est volontairement simple. Une div, un paragraphe.

Puis, nous passons à la mise en page de la notification en CSS

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 16px 24px;
  background: #1f2937;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(50px);
  animation: slideUp 0.6s ease forwards;
}

.toast-success {
  border-left: 4px solid #10b981;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

• position: fixed permet à la notification CSS de rester collée à l’écran, même si vous scrollez.
• transform: translateY(50px) la place 50 pixels plus bas au départ.
• opacity: 0 la rend invisible.

Ensuite, grâce à animation, on appelle slideUp. Dans les @keyframes, on définit l’état final :

• opacité à 1
• position normale

Résultat ? Une notification animée qui glisse vers le haut en douceur.

Simple. Propre. Efficace.

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

Voici la version complète avec le déclenchement de la notification depuis un bouton grâce au JavaScript

<!-- Démo HTML / CSS / JS -->
<div class="exemple">

  <button id="showToast">Afficher la notification</button>

  <div class="toast toast-success" id="toast">
    <p>Votre message a été envoyé avec succès.</p>
  </div>

  <style>
  /* Bouton */
  button {
    padding: 10px 20px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  button:hover {
    background: #059669;
  }

  /* Notification */
  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    background: #1f2937;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(50px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .toast-success {
    border-left: 4px solid #10b981;
  }

  /* Classe active */
  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }
  </style>

  <script>
  const button = document.getElementById("showToast");
  const toast = document.getElementById("toast");

  button.addEventListener("click", () => {

    // Affiche la notification
    toast.classList.add("show");

    // La fait disparaître après 5 secondes
    setTimeout(() => {
      toast.classList.remove("show");
    }, 5000);

  });
  </script>

</div>

Notification animée en fondu avec effet glassmorphism

Ici, on monte en gamme visuelle.

On commence toujours par la base HTML de la notification :

<div class="toast-glass">
  <strong>Information</strong>
  <p>Mise à jour disponible.</p>
</div>

Et, on s’occupe ensuite de la mettre en page en CSS :

.toast-glass {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 20px;
  width: 280px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Pourquoi ça marche ?

backdrop-filter: blur(10px) crée l’effet verre flou.

L’animation combine :

• opacity
• scale()

Cela donne une notification animée plus douce, presque premium.

Ce type de notification CSS fonctionne très bien sur des dashboards modernes ou interfaces SaaS.

Le code complet de la notification avec le déclenchement au bouton en javascript :

<!-- Démo HTML / CSS / JS -->
<div class="exemple">

  <button id="showToastGlass">Afficher la notification info</button>

  <div class="toast-glass" id="toastGlass">
    <strong>Information</strong>
    <p>Mise à jour disponible.</p>
  </div>

  <style>
  /* Bouton */
  #showToastGlass {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  #showToastGlass:hover {
    background: #2563eb;
  }

  /* Notification */
  .toast-glass {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 20px;
    width: 280px;
    background: rgba(31,41,55,0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 9999999999;
  }

  /* Classe active */
  .toast-glass.show-glass {
    opacity: 1;
    transform: scale(1);
  }
  </style>

  <script>
  const buttonGlass = document.getElementById("showToastGlass");
  const toastGlass = document.getElementById("toastGlass");

  buttonGlass.addEventListener("click", () => {

    // Affiche uniquement cette notification
    toastGlass.classList.add("show-glass");

    // Disparition après 5 secondes
    setTimeout(() => {
      toastGlass.classList.remove("show-glass");
    }, 5000);

  });
  </script>

</div>

Notification CSS avec barre de progression

Là, on ajoute un petit détail qui change tout : une barre animée qui montre le temps restant.

Comme pour les autres notifications, d’abord notre structure html :

<div class="toast-progress">
  <p>Fichier téléchargé.</p>
  <div class="progress-bar"></div>
</div>

Puis le style CSS de cette notification :

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 ?

.toast-progress {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #111827;
  color: white;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
  animation: fadeIn 0.5s ease forwards;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #3b82f6;
  animation: countdown 4s linear forwards;
}

@keyframes countdown {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

Explication pédagogique

La barre utilise une animation linéaire de 4 secondes. Elle passe de 100% à 0%.

• Visuellement, l’utilisateur comprend que la notification animée va disparaître.

Ce genre de notification CSS améliore énormément l’expérience utilisateur.

Le code complet avec déclenchement de la notification depuis un bouton :

<!-- Démo HTML / CSS / JS -->
<div class="exemple">

  <button id="showToastProgress">Télécharger le fichier</button>

  <div class="toast-progress" id="toastProgress">
    <p>Fichier téléchargé.</p>
    <div class="progress-bar" id="progressBar"></div>
  </div>

  <style>
  /* Bouton */
  #showToastProgress {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  #showToastProgress:hover {
    background: #2563eb;
  }

  /* Notification */
  .toast-progress {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #111827;
    color: white;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  /* Classe active */
  .toast-progress.show-progress {
    opacity: 1;
    transform: translateY(0);
  }

  /* Barre */
  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #3b82f6;
    width: 100%;
  }

  .progress-bar.animate {
    animation: countdown 5s linear forwards;
  }

  @keyframes countdown {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }
  </style>

  <script>
  const buttonProgress = document.getElementById("showToastProgress");
  const toastProgress = document.getElementById("toastProgress");
  const progressBar = document.getElementById("progressBar");

  buttonProgress.addEventListener("click", () => {

    // Reset animation de la barre
    progressBar.classList.remove("animate");
    void progressBar.offsetWidth; // force le reflow pour relancer l'animation
    progressBar.classList.add("animate");

    // Affiche la notification
    toastProgress.classList.add("show-progress");

    // Cache après 5 secondes
    setTimeout(() => {
      toastProgress.classList.remove("show-progress");
    }, 5000);

  });
  </script>

</div>

Notification animée avec effet rebond

On ajoute du caractère.

<div class="toast-bounce">
  Nouvelle commande reçue !
</div>

.toast-bounce {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #7c3aed;
  color: white;
  padding: 24px 40px;
  border-radius: 20px;
  font-size: 18px;
  animation: bounceIn 0.8s ease forwards;
}

@keyframes bounceIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

Ce que vous apprenez ici

On anime la propriété scale().

À 60%, on dépasse légèrement la taille normale.

• Cela crée un effet rebond.

Cette notification animée attire immédiatement l’attention. Idéal pour un message important.

Le code complet :

<!-- Démo HTML / CSS / JS -->
<div class="exemple">

  <button id="showToastBounce">Simuler nouvelle commande</button>

  <div class="toast-bounce" id="toastBounce">
    Nouvelle commande reçue !
  </div>

  <style>
  /* Bouton */
  #showToastBounce {
    padding: 10px 20px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  #showToastBounce:hover {
    background: #6d28d9;
  }

  /* Notification */
  .toast-bounce {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #7c3aed;
    color: white;
    padding: 24px 40px;
    border-radius: 20px;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
  }

  /* Classe active */
  .toast-bounce.show-bounce {
    animation: bounceIn 0.8s ease forwards;
    opacity: 1;
  }

  @keyframes bounceIn {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
    60% {
      transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  </style>

  <script>
  const buttonBounce = document.getElementById("showToastBounce");
  const toastBounce = document.getElementById("toastBounce");

  buttonBounce.addEventListener("click", () => {

    // Reset animation pour pouvoir la rejouer
    toastBounce.classList.remove("show-bounce");
    void toastBounce.offsetWidth; // force reflow
    toastBounce.classList.add("show-bounce");

    // Disparition après 5 secondes
    setTimeout(() => {
      toastBounce.classList.remove("show-bounce");
      toastBounce.style.opacity = "0";
    }, 5000);

  });
  </script>

</div>

Notification CSS latérale premium

Pour notre dernier exemple, voyons une notification animée qui arrive depuis la gauche avec ombre dynamique.

Comme vous le savez, on commence par la structure HTML :

<div class="toast-side">
  <h4>Erreur</h4>
  <p>Connexion interrompue.</p>
</div>

Et bien évidemment, la mise en page CSS de la notification :

.toast-side {
  position: fixed;
  top: 30%;
  left: -320px;
  width: 300px;
  background: #ef4444;
  color: white;
  padding: 20px;
  border-radius: 0 16px 16px 0;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.3);
  animation: slideInLeft 0.7s ease forwards;
}

@keyframes slideInLeft {
  to {
    left: 20px;
  }
}

Pourquoi c’est élégant ?

Le mouvement latéral crée une vraie dynamique. La bordure arrondie seulement à droite renforce l’effet panneau.

• C’est une notification CSS parfaite pour les alertes importantes.

Le code HTML, CSS et Javascript complet :

<!-- Démo HTML / CSS / JS -->
<div class="exemple">

  <button id="showToastSide">Simuler une erreur</button>

  <div class="toast-side" id="toastSide">
    <h4>Erreur</h4>
    <p>Connexion interrompue.</p>
  </div>

  <style>
  /* Bouton */
  #showToastSide {
    padding: 10px 20px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  #showToastSide:hover {
    background: #dc2626;
  }

  /* Notification */
  .toast-side {
    position: fixed;
    top: 30%;
    left: -320px;
    width: 300px;
    background: #ef4444;
    color: white;
    padding: 20px;
    border-radius: 0 16px 16px 0;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: left 0.6s ease;
  }

  /* Classe active */
  .toast-side.show-side {
    left: 20px;
  }
  </style>

  <script>
  const buttonSide = document.getElementById("showToastSide");
  const toastSide = document.getElementById("toastSide");

  buttonSide.addEventListener("click", () => {

    // Affiche la notification
    toastSide.classList.add("show-side");

    // Cache après 5 secondes
    setTimeout(() => {
      toastSide.classList.remove("show-side");
    }, 5000);

  });
  </script>

</div>

Bonnes pratiques pour une notification animée réussie

Une notification animée ne doit jamais :

• bloquer l’utilisateur
• durer trop longtemps
• être trop agressive

Préférez :

• des animations entre 0.4s et 0.8s
• des couleurs cohérentes avec votre charte
• des ombres légères

Et surtout : testez toujours sur mobile.

Optimisation et accessibilité

Une bonne notification CSS doit aussi être accessible.

Ajoutez des attributs Aria :

role="alert" aria-live="assertive"

Cela permet aux lecteurs d’écran de détecter la notification animée.

Pensez également au contraste des couleurs.

👉 En savoir plus sur les Attributs Aria pour l’accessibilité

---

Créer une notification CSS élégante n’a rien de sorcier. En réalité, tout repose sur la compréhension des propriétés transform, opacity et @keyframes. Une fois ces bases maîtrisées, vous pouvez inventer des dizaines de variantes.

Mais au-delà de la technique, retenez ceci : une notification animée réussie améliore l’expérience utilisateur. Elle rassure, informe, guide. Elle donne du rythme à votre interface. Et entre nous… un site qui bouge avec finesse paraît toujours plus professionnel.

Alors maintenant, ouvrez votre éditeur, amusez-vous, testez, modifiez les durées, changez les couleurs. C’est en expérimentant que vous passerez du simple code à une véritable signature visuelle.

Et ça, c’est tout sauf anodin.