如何在我的CSS元素中淡入效果？

Question

這是我的CSS。第一個問題，我想要當div在上面懸停時出現的效果淡入淡出，而不是瞬間淡出。我試圖使用轉換，但它似乎混亂的元素的設計，所以我卡住了。

我的第二個問題是（這裏是供參考的jfiddle：https://jsfiddle.net/ojvym9cm/2/），是否有可能在發生'do'keyanimation後發生懸停效應？我不希望在div動畫時發生懸停效果。

我的第三個問題是，爲什麼動畫會立即發生，而不是僅僅在點擊'half'div之後纔會發生？ （jfiddle供參考）。對不起，這些是我花了很多時間試圖弄清楚所有這些並且總結出來的很多問題。

#middle { 
    width: 100px; 
    height: 100px; 
    top: 0; 
    left: 50%; 
    display: block; 
    position: fixed; 
    border-radius: 150px; 
    background: powderblue; 
    animation: do 4s 1 ease; 
    -webkit-animation-fill-mode: forwards; 
} 

#middle:hover { 
    width: 96px; 
    height: 48px; 
    left: 50%; 
    top: 30%; 
    position: fixed; 
    border-color: powderblue; 
    border-style: solid; 
    border-width: 2px 2px 50px 2px; 
    border-radius: 100%; 
    z-index: 1000; 
    background: white; 
} 

#middle:hover:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: white; 
    border: 18px solid powderblue; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
} 

#middle:hover:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: powderblue; 
    border: 18px solid white; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
} 

Answer 1

要回答這個問題：First question, I want the effects that occur when the div is hovered above to fade in and out, rather than it being instant. I tried to use transitions, but it seems to mess with the design of the element, so I'm stuck.

要做到這一點，你將需要：transition: opacity 300ms;在元素法則，也是懸停規則兩者。

我現在正在看你的其他問題，並在此期間更新答案。

Answer 2

您可以使用CSS實現動畫，但按照您想要的方式觸發它，您將需要jQuery。

下面是一個例子：https://jsfiddle.net/557g66ry/

和一些解釋相關： 我配置動畫slideDown影響2個參數：

• 項目頂部位置（像你一樣一樣的）

• 項目透明度（有淡出動畫）[回答你的問題1]

  @keyframes slideDown { from { opacity：0; top：0; } 至{ 不透明度：1; top：30％; }}

，爲#middle項目的初始狀態（無.down類），我有：

opacity: 0; 

爲了確保在默認情況下，該項目是不可見的。

當我決定激活動畫只有當hte #middle項目的類別.down。 這讓我來觸發它，當我點擊（使用jQuery）的#half項目[即回答你的問題2]：

#middle.down { 
    animation: slideDown 4s 1 ease; 
-webkit-animation-fill-mode: forwards; 
} 

最後，我用同樣的伎倆拖延後的懸停效果動畫結束。

因爲我們知道動畫的持續時間（4秒），所以只有當#middle項目具有.arrived類別時，才激活懸停CSS。

然後用JavaScript setTimeout函數（和jQuery）我的.arrived類4S（4000 = milisecondes）後，添加到該項目的幫助[即回答你的問題3]：

setTimeout(function() { 
     $('#middle').addClass('arrived'); 
}, 
4000);