当使用'all'属性时，使用CSS多次转换的Buggy闪烁效果

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秒为动画，并且会奇怪地闪烁。
Here the codepen Demo

有人知道为什么会这样吗？我怎样才能实现自己的目标呢？ 是的，我需要all属性！

修改

刚发现一个奇怪的人。在上面链接的codepen中，它闪烁。但是当我为padding设置动画时，它会停止闪烁！但背景将以1s动画...
Here's the second demo

Answer 1

我在代码笔中试过这个，问题不在转换属性中。

最好使用 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;
}