CSS Transition不生效：点击按钮后元素仅显隐无平滑过渡

Hey there! I see the issue right away—your CSS transition declarations have a syntax error that's preventing the smooth animation from working. Let's break down the problem and fix it step by step.

The Root Cause #

Your transition property is written in the wrong order and missing a critical time unit. Right now you have:

transition:2.5 all ease;
transition:2.7 all ease;

The correct syntax for the transition property is:
transition: [property] [duration] [timing-function];
You've placed the duration first, and more importantly, you didn't add the time unit (s for seconds). Browsers can't interpret 2.5 as a duration without a unit, so they ignore the entire transition rule.

Corrected CSS Code #

Here's the fixed version of your CSS with proper transition syntax:

.content-container-title { 
  text-align: center; 
  width:40%; 
  transition: all 2.5s ease; /* Fixed order + added 's' unit */
  margin:140px 30% 0 30%; 
  opacity:0; 
} 

.titleShown { opacity:1; } 

.content-container-title h2 { 
  font-family: cuisine; 
  font-size:50px; 
  margin:0; 
  text-shadow: 0 0 5px rgba(0,0,0,1); /* Removed extra unnecessary 0 */
} 

.content-container-text { 
  text-align:center; 
  width:50%; 
  opacity:0; 
  margin:20px 25%; 
  transition: all 2.7s ease; /* Fixed order + added 's' unit */
  overflow:hidden; 
} 

.textShown { opacity: 1; } 

.content-container-text p { 
  margin:0; 
  font-family: cuisine; 
  font-size:24px; 
  opacity: 0.8; 
}

Quick Notes to Ensure It Works #

• I also cleaned up the text-shadow value in your h2 rule—you had an extra 0 (0 0 5px 0 rgba(...)) which isn't necessary for that property's syntax.
• Your JavaScript logic for adding the classes after a timeout is correct, since you're waiting for the dynamic elements to be inserted into the DOM before triggering the transition. Just keep using that flow to ensure the elements exist when the class is applied.

Once you update the CSS transitions, your .content-container-title and .content-container-text elements will smoothly fade in instead of popping into view.

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