Pouvez-vous masquer un élément après un délai à l'aide de transitions CSS pures ?

Masquer des éléments avec CSS après un délai

Éliminant le besoin de solutions jQuery, cette question explore s'il est possible de masquer un élément 5 secondes après le chargement d'une page en utilisant des transitions purement CSS.

L'Innovant Approche

Étant donné que les animations et les transitions CSS tournent généralement autour de la modification de propriétés telles que les dimensions ou la visibilité, les méthodes standard de masquage d'un élément (par exemple, définir l'affichage sur caché) ne sont pas applicables ici.

Par conséquent, une séquence d'animation personnalisée résout ce défi. En animant la hauteur et la largeur à zéro après 5 secondes, l'élément disparaît effectivement de la vue tout en n'occupant aucun espace dans la mise en page. Simultanément, définir la visibilité sur caché garantit qu'elle reste imperceptible pour l'utilisateur.

Implémentation et exemple

Le code suivant montre comment implémenter cela solution :

CSS :

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML :

<div>

Violon :

Voir la solution en action sur JSFiddle : [lien vers fiddle]

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!