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，因为这是transition的正确简写语法。

现在，由于极高的right:50000px设置，转换发生得非常快，它在这10秒内传播了很长时间(几乎不明显(我把这个改成了更低的金额。

工作JSFiddle-注意，动画现在真的很糟糕，但至少能发挥作用。你仍然应该按照你想要的方式改变它，但这表明它现在是有效的

Answer 2

要使CSS转换工作，转换到和转换自的值需要是长度或百分比(或calc(((。请参阅W3C CSS Transitions文档中的此部分。

当特性的from值和to值都具有所描述的类型时，动画值将从from值和to值进行插值。(当列出诸如"长度、百分比或计算"之类的复合类型时，这意味着两个值都必须适合该复合类型。(当以"a或B"的形式列出多个类型时，两个值必须是相同的类型才能插入。

Answer 3

好的，有几个问题。我还并没有弄清楚原因，但若在悬停之前检查元素，那个么甚至并没有可见的：before和：after。因此，第一步是清理CSS。悬停时只有一个属性在更改，这是正确的值。因此，当您声明.tooltip:hover:before时，其中应该只有一个属性：更改的权限值。

问题2是你不能在转换中从px到%。转换仅影响相同值的数字。所以我做的是：

首先，将工具提示构建为：在悬停时显示的方式之前和之后。然后，一旦它看起来不错，就将right:值更改为动画的起点。然后，将：hover:fore和：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>