父母和孩子的CSS过渡毫不拖延

Question

我有以下代码

a {
  color: #F00;
  transition: all 0.5s;
}

a:hover {
  color: #FF0;
}

a:hover i {
  margin-right: 10px;
}

a i {
  transition: all 0.5s;
}

<a href="#">
  <i class="fa fa-plus">+</i>
  Button Text
</a>

我希望当鼠标悬停在链接上时，过渡效果会在同一时间更改图标和文本之间的颜色和空间。

这样它首先改变空间然后改变颜色，因此动画以“顺序”模式播放。

我如何才能使动画正确，因此它会随着空间和颜色的变化而变化，而不会出现这种延迟。

Answer 1

尝试在内部元素上设置margin转换：

＆＃13;

＆＃13;

a {
  color: #F00;
  transition: all 0.5s;
}

a:hover {
  color: #FF0;
}

a:hover i {
  margin-right: 10px;
}

a i {
  transition: margin 0.5s;
}

＆＃13;

<a href="#">
  <i class="fa fa-plus">+</i>
  Button Text
</a>

＆＃13;

＆＃13;

＆＃13;