如何创建一个在3秒后开始消失的div？

Question

我希望默认情况下在页面顶部显示div，但是当您加载页面时，会启动3秒计时器，之后该div开始淡出，直到它消失。我对如何做到这一点有一些想法，但我不完全确定：

1. 设置css中div的转换，但是我希望它花费多长时间 淡出，并将背景颜色/颜色设置为0不透明度的rgba值
2. 使用setTimeout在页面加载时在开头创建3秒计时器
3. 我被困了......

Answer 1

这可能是最简单的方法。在动画上设置forwards很重要，因此在动画完成后不透明度不会重置。

＆＃13;

＆＃13;

    @keyframes fadeout {
      to { opacity: 0; }
    }
    
    .thing {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: .5s fadeout forwards 3s;
    }

＆＃13;

<div class="thing"></div>

＆＃13;

＆＃13;

＆＃13;