Les transitions ou animations CSS peuvent-elles masquer automatiquement les éléments après 5 secondes ?

CSS Masquer automatiquement les éléments après 5 secondes

La question se pose : est-il possible de masquer un élément cinq secondes après le chargement de la page ? Une solution jQuery est connue, mais l'intention est de la répliquer en utilisant la transition CSS. Est-ce possible, ou est-ce au-delà des capacités de transition/animation CSS ?

La réponse

La réponse est un oui catégorique ! Cependant, cela ne peut pas être réalisé de la manière attendue car l'animation ou la transition des propriétés généralement utilisées pour masquer un élément (telles que l'affichage ou la modification des dimensions et le réglage du débordement : caché) n'est pas possible.

Au lieu de cela, une animation est créé pour les éléments concernés. Après cinq secondes, visibilité : masquée ; est basculé, tandis que la hauteur et la largeur sont définies sur zéro pour empêcher l'élément d'occuper de l'espace dans le flux DOM.

Exemple Code

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>

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!