Question

您好我在Google Chrome浏览器中遇到问题我不知道如何修复问题：svg转换在A标签和SPAN标签转换完成后开始，我在IE 11中测试过但似乎没有问题

我希望所有过渡都从一个点开始，然后一起结束，因为我给了他们所有0.15秒的时间段。

我的代码：

HttpConfiguration.DependencyResolver

#mainNav {
  height: 42px;
  background-color: #f5f5f5;
}

#mainNav * {
  transition: all 0.15s ease-out;
}

#mainNav > a {
  display: inline-block;
  height: 100%;
  position: relative;
  font: 13px/42px "IranYekanWebLight";
  font-weight: 700;
  color: #575757;
  overflow: hidden;
}

#mainNav > a:hover {
  background-color: #ddd;
}

#mainNav > a:hover span {
  font-size: 17px;
  padding-right: 55px;
}

#mainNav > a:hover svg {
  left: 35%;
  fill: #fff;
}

#mainNav span {
  padding: 0 30px;
  position: relative;
  z-index: 1;
}

#mainNav svg {
  height: 90px;
  position: absolute;
  bottom: -90%;
  left: 10%;
  fill: #e3e3e3;
  z-index: 0;
}

#mainNav > a.aqua {
  border-top: 4px solid #1cbbb4;
}

Answer 1

我想我知道你的代码有什么问题。您正在将转换应用于#mainNav的每个子节点，而只需要为svg而不是每个子节点设置动画。

您可以将选择器更改为：

#mainNav a > * {
  transition: all 0.15s ease-out;
}

SVG CSS过渡在所有动画之后开始

1 个答案: