Pouvez-vous masquer un élément après 5 secondes en utilisant uniquement CSS ?

Masquage automatique des éléments CSS après 5 secondes

Pouvez-vous masquer un élément 5 secondes après le chargement d'une page à l'aide de CSS ? Une solution jQuery est certainement réalisable, mais est-il possible d'y parvenir en utilisant la transition CSS ?

La réponse : Oui

Cependant, il y a une différence. Les transitions CSS ne peuvent pas être appliquées à des propriétés telles que « affichage » ou des dimensions pour obtenir un véritable masquage. Au lieu de cela, créez une animation pour l'élément et basculez sa visibilité sur "cachée" après 5 secondes. Simultanément, définissez la hauteur et la largeur sur zéro pour éviter l'occupation de l'espace dans le flux DOM.

Exemple

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div>

Cette approche permet le résultat souhaité à l'aide de transitions CSS, masquant l'élément après un délai spécifié sans affecter le flux de 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!