Comment animer un élément caché en CSS ?

Animation et affichage CSS : aucun

En CSS, animer des éléments masqués (par exemple, affichage : aucun) n'est pas simple. Lors de la définition de display: none supprime un élément du flux de documents, il occupe toujours de l'espace. Pour résoudre ce problème :

1. Définir une hauteur fixe :

Puisque vous ne pouvez pas animer entre display: none et display: block, fixez la hauteur initiale de l'élément masqué à la hauteur qu'il occupera une fois révélé.

CSS :

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2. Utiliser une image clé d'animation :

Définissez une image clé d'animation qui fait passer l'élément d'une hauteur de 0 à la hauteur souhaitée.

CSS :

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3. Appliquer l'animation :

Associez l'image clé de l'animation à l'élément caché.

CSS :

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

Maintenant, l'élément caché glissera de manière transparente vers le bas sans affecter la disposition des autres éléments sur le page.

Remarque : Cette approche fonctionne si vous avez une hauteur fixe pour l'élément caché. Pour les hauteurs dynamiques, vous devrez peut-être utiliser jQuery ou JavaScript.

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!