Maison >interface Web >tutoriel CSS >Comment puis-je utiliser les transitions CSS pour masquer automatiquement les éléments après un délai ?

Comment puis-je utiliser les transitions CSS pour masquer automatiquement les éléments après un délai ?

DDD
DDDoriginal
2024-11-09 13:38:02486parcourir

How Can I Use CSS Transitions to Automatically Hide Elements After a Delay?

Transitions CSS : masquage automatique des éléments après un délai

Le masquage d'éléments sur une page Web après un intervalle de temps spécifique peut être réalisé par différentes méthodes. Bien que jQuery offre une solution simple, les transitions CSS offrent une alternative innovante pour obtenir le même résultat.

Approche :

Malgré les limites des transitions CSS dans l'animation directe de propriétés telles que affichage, il est possible de simuler le masquage d'éléments en tirant parti de l'animation et en manipulant la visibilité des éléments.

Mise en œuvre :

  1. Créer une animation CSS pour la durée souhaitée (5 secondes dans ce cas) à l'aide de @keyframes.
  2. Dans l'animation, définissez la hauteur et la largeur de l'élément à zéro pour le faire disparaître.
  3. Utilisez animation-fill-mode: forwards; pour garantir que l'élément reste masqué une fois l'animation terminée.
  4. Après le délai d'animation (5 secondes), basculez la visibilité : cachée ; sur l'élément pour le supprimer complètement de la vue.

Fiddle :

Le violon suivant démontre l'implémentation CSS :

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
<div>

Cette technique masque efficacement les éléments après l'intervalle de temps spécifié, les empêchant d'occuper un espace visible sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn