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

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!