过渡立即发生，尽管我有持续时间

Question

过渡生效，但持续时间不生效。如何解决这个问题，为什么会发生？

Html

<article class="about-img">
  <div class="about-picture-container">
    <img src="./images/about-bcg.jpeg" alt="tea kettle" class="about-picture">
   </div>
 </article>

CSS

.about-picture-container {
  background: var(--primaryColor);
  border: 0.5rem solid var(--primaryColor);
  border-radius: 1rem;
  /* overflow */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.about-picture-container:hover .about-picture {
  opacity: 0.5;
  transform: scale(1.2);
}

Answer 1

您正在将转换设置为一个 class .about-picture-container 并将转换应用于另一个 .about-picture。

尝试将您的代码更改为：

.about-picture-container .about-picture {
  background: var(--primaryColor);
  border: 0.5rem solid var(--primaryColor);
  border-radius: 1rem;
  /* overflow */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.about-picture-container:hover .about-picture {
  opacity: 0.5;
  transform: scale(1.2);
}

过渡立即发生，尽管我有持续时间

Transition happens instantly even though, I have duration time

css

transition