使用属性时带有 CSS 多过渡'all'错误闪烁效果

Question

我的CSS transition属性有问题
我需要为一个section-标记声明两个转换。该部分的每个过渡都应具有1s的持续时间，只有背景的应具有0.3s的持续时间

所以我的CSS-transition代码看起来是这样的：

section{
   background: black;
   transition: all 1s ease, background 0.3s ease;
}
section:hover{
   background: green;
   transform: translateY(100px);
}

但当我现在悬停在链接上时，背景会在1秒内变为动画，它会奇怪地闪烁
这里的代码笔演示

有人知道为什么会发生这种事吗？我该如何实现我的目标
是的，我需要all属性！

编辑

刚发现一个奇怪的。在上面链接的代码笔中，它会闪烁。但当我也为padding设置动画时，它就停止闪烁了！但背景将在1秒钟内动画化
这是的第二个演示

Answer 1

我在代码笔中尝试过，问题不在transition属性中。

最好使用div标签作为链接背景，并为此创建单独的转换。

div标签肯定会为您的问题提供最佳解决方案。

Answer 2

出现问题是因为当您将鼠标悬停在元素上时，它开始向下移动当元素未悬停时，它将返回现在，当您悬停时，元素开始移动，然后立即失去悬停，这导致它返回到原始状态，但再次获得悬停效果因为它再次接收到鼠标悬停事件，这也导致闪烁，以及您观察到的奇怪现象。如果将鼠标靠近底部，则可以观察到所需的效果。

修复方法应该是为包含这些元素的容器编写一个悬停，并将效果应用于这些元素。

此外，你只在1种状态下应用了转换，这也可能是眨眼的原因；

尝试使用以下两种语句的转换：

section{
  width:300px;
  height:300px;
  background:black;
  color:white;
  transition: background 0.3s ease, all 3s ease;
}
section:hover{
  background:green;
  transition: background 0.3s ease, all 3s ease;
}