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

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

我的第二個問題是（這裏是供參考的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; 
}

來源

2017-08-10 Elsa Amri

答覆問題3你需要jQuery。如果我在小提琴中包含jquery，它只會在點擊後出現 – SchoolBoy

作爲對2的回答，你可以做的是添加另一個同時運行的動畫，它使用'！important'覆蓋屬性。將其設置爲一步。這將做什麼，直到動畫完成，這些屬性將應用，然後他們將停止應用和懸停效果將可見。 – SchoolBoy

查看[this]（https://jsfiddle.net/168b69dt/）提琴1和3的答案 – SchoolBoy

要回答這個問題：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;在元素法則，也是懸停規則兩者。

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

來源

2017-08-10 13:18:26

我加了你說的，但效果仍然立即發生。 –

您可以使用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);

來源

2017-08-10 14:01:39 Dexter0015

Ohhhh，我不知道setTimeout函數，它簡化了很多事情。我還想出了爲什麼我的div不僅在點擊半圈時滑落，而且感謝您的幫助！ –

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

回答

相關問題