如何在我的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);