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

这是我的CSS。第一个问题，我希望div悬停在上方时产生的效果淡入淡出，而不是瞬间消失。我试着使用转换，但它似乎弄乱了元素的设计，所以我被卡住了

我的第二个问题是（这里是jfiddle供参考：），是否只允许在“do”键动画发生后出现悬停效果？我不希望在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;
}

---

要回答这个问题：

第一个问题，我希望div悬停在上方时产生的效果淡入淡出，而不是瞬间消失。我试着使用转换，但它似乎弄乱了元素的设计，所以我被卡住了。

为此，您需要：

转换：不透明度300ms

我现在正在看你的其他问题，同时会更新答案。
你可以用CSS制作动画，但是，要以你想要的方式触发动画，你需要jQuery

以下是一个例子：

还有一些解释：
我将动画
slideDown
配置为影响两个参数：


项目顶部位置（与您所做的相同）
项目不透明度（使淡入淡出动画）[回答问题1]

@关键帧向下滑动{
从{
不透明度：0；
排名：0；
}
到{
不透明度：1；
最高：30%；
}
}


对于
#middle
项的初始状态（没有
.down
类），我有：

opacity: 0;

对于，请确保默认情况下该项不可见

当我决定只在
#middle
项具有类
.down
时激活动画时。
这是允许我在单击半项（使用jQuery）[回答您的问题2]时触发的：

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

最后，我使用相同的技巧在动画结束后延迟悬停效果

我们知道动画的持续时间（4s），只有当
#middle
项的类
到达时，我才激活悬停CSS

然后在JavaScript setTimeout函数（和jQuery）的帮助下，我将
.arrived
类添加到4s（4000=毫秒）后的项中[这回答了您的问题3]：

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

问题3的答案是您需要jquery。如果我将jquery包含在fiddle中，它仅在单击后作为对2的回答出现，那么您可以添加另一个同时运行的动画，这将使用
覆盖属性！重要信息
。将其设置为步骤。在动画完成之前，这些属性将应用，然后它们将停止应用，悬停效果将可见。有关1和1的答案，请参阅fiddle3@SchoolBoy非常感谢！！！！！！！我现在将处理数字2，如果我需要更多帮助，请告诉你。我添加了你所说的内容，但效果仍然会立即发生。哦，我不知道setTimeout函数，它可以简化很多事情。我也弄明白了为什么我的div不仅仅是在点击半圆时滑下来的，还感谢你的帮助！！