CSS 转换不会按预期发生

Question

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:after,
.tooltip:before {
  transition: 10s linear all
}
.tooltip:before {
  z-index: 99;
  top: 100%;
  right: 50000px;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  top: 100%;
  right: 50000px;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  right: 50%;
  margin-top: -12px
}
.tooltip:hover:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  right: 20%;
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px
}

<span class="tooltip" title="Lorem ipsum!">Hover me</div>

我正在尝试为正确的位置创建过渡，

如你所见，它有一个非常大的正确值，然后是我需要的那个，

但由于某种原因，过渡不会动画，

你知道我错过了什么吗？

Answer 1

问题是因为您的:before 和:after 伪元素在:hover 发生之前不包含content:""。如果它从未出现，你就无法为它制作动画。

我还将transition: 10s linear all 更改为transition: all 10s linear，因为这是the correct shorthand syntax for transition。

现在转换发生得非常快，由于right:50000px 设置极高，它在这 10 秒内经过了很长的时间（几乎看不到）。 - 我将其更改为较低的金额。

Working JSFiddle - 请注意，动画现在真的很糟糕，但至少让它工作了。你仍然应该按照你想要的方式改变它，但它表明它现在可以工作了。

Answer 2

要使 CSS 过渡生效，过渡到和从过渡到的值需要是长度或百分比（或 calc()）。请参阅 W3C CSS 转换文档中的 this section。

当属性的 from 和 to 值都具有所描述的类型时，动画值是从 from 和 to 值插入的。 （如果列出了诸如“长度、百分比或计算”之类的复合类型，这意味着两个值都必须适合该复合类型。）当以“A 或 B”的形式列出多个类型时，两个值都必须是相同类型的可插值。

Answer 3

好的，有几个问题。我没有弄清楚为什么，但是如果您在悬停之前检查元素，则没有 :before 和 :after 甚至可见。所以第一步是清理你的 CSS。只有 1 个属性在悬停时发生变化，这是正确的值。因此，当您声明 .tooltip:hover:before 时，其中应该只有一个属性：更改后的正确值。

问题 #2 是您不能在转换中从 px 转到 %。转换只影响相同值的数量。所以这就是我所做的：

首先，将您的工具提示构建为 :before 和 :after 您希望它在悬停时出现的方式。然后，一旦它看起来不错，将您的 right: 值更改为动画的起点。然后将 :hover:before 和 :hover:after 设置为正确的值。见下文。

问题 3：您的动画距离和时间跨度都异常长。我知道您希望它不可见并从左侧滑入，所以让我们用一些实用的动画来解决这个问题。通过定位哪些属性是动画的，我们可以让它看起来很漂亮。

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  margin-top: -12px;
  z-index: 99;
  top: 100%;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px;
  background: #FCE0BA;
  top: 100%;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  right: 50%;
  opacity:1;
}
.tooltip:hover:after {
  right: 20%;
  opacity:1;
}
.tooltip:after,
.tooltip:before {
  transition: 1s linear all;
  opacity:0;
  right:100%;
}

<span class="tooltip" title="Lorem ipsum!">Hover me</div>