Can CSS Animations Work with Elements Set to `display: none`?

CSS Animation and Displaying Elements

You've attempted to use CSS animation with an element that initially has display: none. While this might seem like a straightforward approach to show and hide elements dynamically, CSS limitations prevent it.

The Problem with display: none

CSS Animations cannot handle transitions between display: none and display: block or between height: 0 and height: auto. You need to hardcode the height if possible, otherwise, using JavaScript would be necessary.

Setting Height

In situations where hardcoding height is not feasible, you can use overflow: hidden to conceal the element and set its height to 0. When you're ready to show it, set overflow back to visible and animate the height to its full extent.

Example Code

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from { height: 0; }
  to { height: 300px; }
}

HTML:

<div>

In this example, overflow: hidden ensures the element remains hidden as its height is animated from 0 to 300px.

Note: The CSS example uses vanilla CSS. If you're using Animate.css, you can replace the @keyframes rule with the corresponding Animate.css class.

This approach allows you to smoothly animate elements without relying on display: none or jQuery, providing smoother transitions and more precise timing control.

The above is the detailed content of Can CSS Animations Work with Elements Set to `display: none`?. For more information, please follow other related articles on the PHP Chinese website!