3秒後に消え始めるdivをどのように作成すればよいですか？

Question

デフォルトでは、ページ上部にdivが表示されますが、ページを読み込むと3秒のタイマーが開始され、その後divは消えるまで消え始めます。私はこれを行う方法についていくつかのアイデアを持っているが、私は全くわからない：設定した背景色/色が長いためにCSSでdiv要素の

1. セットの遷移が、私はそれがフェードアウト を過ごしたい、と0不透明度
2. setTimeoutを使用してRGBA値は

Answer 1

これはおそらくそれを行うための最も簡単な方法です...私はこだわっているページが読み込ま

初めに3秒タイマーを作成します。アニメーションにforwardsを設定することは重要です。そのため、アニメーションの完了後に不透明度がリセットされることはありません。

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

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