CSS Transition不生效求助：无法为目标div添加过渡效果

Alright, let's break down why your transition isn't kicking in—it's a classic gotcha with how CSS transitions work!

The Core Problem #

CSS transitions need a clear starting value and ending value for the property you want to animate. Right now, your .desc-mov class doesn't set an initial bottom value (it defaults to the browser's auto), so when you set bottom: 0px on hover, the browser can't calculate a smooth transition from auto to 0px—it just jumps instantly instead of animating.

The Fix #

Here's what you need to adjust to get that transition working:

1. Add an initial bottom value to your base .desc-mov class (pick a value that fits your layout—for example, bottom: -130px to hide it just below its parent container).
2. Explicitly target the bottom property in your transition rule (instead of applying transitions to all properties, which can cause unexpected behavior later).
3. Optional but critical: Make sure the parent element of .desc-mov has position: relative—otherwise, your absolute-positioned element will be relative to the entire document instead of its parent, which might break your layout.

Updated Code #

CSS

.desc-mov { 
  background-color: #eee; 
  font-size: 11px; 
  color: black; 
  height: 130px; 
  width: 100%; 
  opacity: 0.6; 
  line-height: 1.5; 
  /* Target only the bottom property for smooth transition */
  transition: bottom 5s ease; 
  position: absolute; 
  /* Initial position (hidden below the parent container) */
  bottom: -130px; 
}

.desc-mov:hover { 
  bottom: 0px; 
}

/* Add this to the parent element of .desc-mov */
.parent-container {
  position: relative;
  height: 200px; /* Adjust this to fit your design */
}

HTML

<!-- Wrap your .desc-mov in a relative-positioned parent -->
<div class="parent-container">
  <div class="desc-mov"> 
    <p>how are you are that working</p> 
  </div>
</div>

Quick Extra Tips #

• If you want to transition other properties (like opacity) alongside bottom, just add them to the transition rule: transition: bottom 5s ease, opacity 0.3s ease;
• Tweak the initial bottom value to match your desired starting position—this is what makes the slide-up animation feel natural.

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