Maison > interface Web > tutoriel CSS > Comment animer un élément caché en CSS ?

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

DDD
Libérer: 2024-11-14 09:39:01
original
422 Les gens l'ont consulté

How to Animate a Hidden Element in 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 :

1

2

3

4

5

6

#main-div {

  height: 0;

  display: block;

  overflow: hidden;

  animation-delay: 3.5s;

}

Copier après la connexion

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 :

1

2

3

4

5

6

7

8

@keyframes main-div-slide {

  from {

    height: 0;

  }

  to {

    height: 375px;

  }

}

Copier après la connexion

3. Appliquer l'animation :

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

CSS :

1

2

3

#main-div {

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

}

Copier après la connexion

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

Remarque : Cette approche fonctionne si vous avez une hauteur fixe pour l'élément masqué. 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal