CSS transition-duration对子元素不生效？求助排查绝对定位子div过渡问题

我来帮你搞定这个过渡失效的问题~ 核心原因其实很简单：过渡属性必须定义在元素的「常态样式」中，而不是仅在hover触发的样式里。

你现在的代码里，把transition-duration写在了&:hover .image这个hover触发的规则里——这就导致当鼠标悬停时，浏览器才给.image加上过渡属性，同时直接应用了缩放和滤镜的变化，相当于“一步到位”，自然看不到过渡动画。

正确的做法是把过渡属性移到.image的基础样式中，让元素在默认状态下就知道“我要为哪些属性的变化添加过渡效果”：

.image {
  position: absolute;
  /* 你原本的其他样式，比如width、height、background之类的 */
  /* 这里添加过渡规则，指定要过渡的属性和时长 */
  transition: transform 0.5s ease, filter 0.5s ease;
}

然后在hover规则里只保留属性变化的部分即可：

&:hover .image {
  transform: scale(1.1);
  filter: blur(3px) brightness(80%);
  /* 删掉这里的transition-duration */
}

至于你说“直接将hover语句应用于父元素而非图片时过渡正常”，那是因为你当时把过渡属性写在了父元素的常态样式里，父元素的状态变化（比如尺寸、位置之类的）会遵循过渡规则。但子元素的独立属性变化需要自己的过渡声明，父元素的过渡不会自动继承给子元素哦~

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