Les transitions CSS peuvent-elles masquer automatiquement les éléments après une durée définie ?

Masquage automatique d'éléments à l'aide de transitions CSS

Pouvez-vous faire disparaître un élément 5 secondes après le chargement d'une page ? Bien qu'une solution jQuery soit connue, cet article explore comment obtenir le même effet en utilisant des transitions CSS.

Est-ce possible ?

Oui, mais pas de manière conventionnelle . En règle générale, les transitions sont appliquées à des propriétés telles que l'affichage, les dimensions ou le débordement. Cependant, ces propriétés contrôlent directement la visibilité et l'occupation de l'espace de l'élément.

Solution innovante

Pour contourner cette limitation, créez une animation pour l'élément cible. Après 5 secondes, basculez sa visibilité sur masquée. De plus, définissez sa hauteur et sa largeur sur zéro pour éviter qu'il ne prenne de la place dans le flux de documents.

Exemple de mise en œuvre

CSS :

#hideMe {
  -webkit-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;
    overflow: hidden;
  }
}

HTML :

<div>

Ce code configure une animation qui réduit l'élément à zéro dimension 5 secondes après le chargement de la page. L'élément devient masqué tout en conservant sa position dans le flux de documents.

Conclusion

Bien que l'approche conventionnelle pour masquer des éléments puisse ne pas être directement applicable, l'utilisation du basculement de visibilité et du zéro Les dimensions en conjonction avec les animations CSS fournissent une solution innovante pour masquer automatiquement les éléments après un intervalle de temps spécifié.

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!