Hey there! Let's break down why your transition and transform aren't behaving as expected, and fix it step by step.

The Root of the Problem #

Your current code uses display: none → display: block to toggle the panel, and this is the main culprit:

• display property changes don't trigger transitions: Browsers treat display: none as removing the element entirely from the document flow—there's no intermediate state to animate between, so transitions just won't run.
• Transform won't work on hidden elements: When .panel is display: none, its child .text-light isn't rendered at all. Even after switching to display: block, the browser doesn't register the transform change as an animatable state shift.

The Fix: Use Animatable Properties for Toggling #

Instead of display, use opacity and visibility (both animatable) to control the panel's visibility. Here's the revised CSS:

div.panel {
  /* Replace display:none with animatable properties */
  opacity: 0;
  visibility: hidden;
  /* Add transition for the show/hide animation */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

div.panel.show {
  opacity: 1;
  visibility: visible;
}

.panel.show .text-light {
  transform: translateY(10%);
  background: red;
  /* Explicitly define the transition for transform (with delay) */
  transition: transform 0.5s ease 3s;
}

Why This Works #

1. Smooth show/hide transition: opacity and visibility let the browser calculate intermediate states, so the panel fades in/out instead of popping instantly.
2. Transform triggers correctly: Once the panel is visibility: visible and opacity: 1, the .text-light element is fully rendered, so the transform transition will kick in after the 3-second delay as intended.

Bonus Tip (If You Need No Layout Space When Hidden) #

If you want the panel to not take up space when hidden, add height: 0 and overflow: hidden to the base .panel style, then set height: auto on .panel.show (just note you'll need to adjust the transition for height if you want it animated too):

div.panel {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
}

div.panel.show {
  opacity: 1;
  visibility: visible;
  height: auto;
}

内容的提问来源于stack exchange，提问作者dedi wibisono