即使有持续时间，过渡也会立即发生

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

您正在将转换设置为一个类.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);
}