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的transition。

現在過渡發生得非常快，由於極高的設置，它在這10秒內（幾乎沒有引人注意的）漫遊一段時間。 - 我改變了這個數字。

Working JSFiddle - 請注意，動畫現在真的很糟糕，但至少讓它工作。你仍然需要按照你的想法改變它，但它表明它現在起作用了。

Answer 2

對於CSS轉換工作來說，過渡到的值需要是長度或百分比（或calc（））。請參閱W3C CSS轉換文檔中的this section。

當屬性的from和to值都具有所描述的類型時，動畫值將從from和values中插值。 （當列出諸如「長度，百分比或計算」的組合類型時，這意味着這兩個值必須適合該組合類型。）當多種類型以「A或B」形式列出時，這兩個值必須是相同類型的插件。

Answer 3

好的，有幾個問題。我沒有弄清楚爲什麼，但是如果你在你懸停之前檢查元素，就沒有：之前和之後：甚至可見之後。所以第1步正在清理你的CSS。懸停時只有1處房產正在改變，這是正確的價值。所以當你聲明你的.tooltip:hover:before時，應該只有一個屬性：改變的右值。

問題2是你不能從px轉換到％。轉場隻影響相同數值的數字。所以這裏是我做的：

首先，建立你的工具提示爲：之前和之後：你希望它出現在懸停的方式。然後，一旦它看起來不錯，將右邊的值改爲動畫起點的位置。然後，您將：hover：before和：hover：設置爲正確的值之後。見下文。

問題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>