CSSアニメーションについて

Question

前提・実現したいこと

画像をCSSアニメーションで削除したい

発生している問題・エラーメッセージ

自力で調べてCSSを書いてみたのですが、思ったように動きません

該当のソースコード

CSSアニメーション

 div.videoload{
 animation-name:videoload;
 animation-delay:3s;
 }
@keyframes videoload{
	0%{  opacity:0; }

サイトのコード

<div>
    <iframe width="600" height="500" onload="loaded()" src="http://192.168.11.14:8080/video" scrolling="no">
    </iframe>
    <img class="videoload" id="wait" width="600" height="500"
        src="http://placehold.jp/25/000000/807979/600x500.jpg?text=%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E7%8F%BE%E5%9C%A8%E6%98%A0%E5%83%8F%E5%8F%97%E4%BF%A1%E4%B8%AD%E3%81%A7%E3%81%99....%0A%20%20%20%20%20%20%20%20%0A%0A%0A%20%20%20%E3%81%93%E3%81%AE%E3%81%BE%E3%81%BE%E3%81%A7%E3%81%8A%E5%BE%85%E3%81%A1%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84..."></img>

試したこと

mozillaを見ながら改良した
関連リンク
https://teratail.com/questions/245644

Comments

[oikashinoa]

関係する質問のリンクを質問本文にも書いておきましょう

Answer 1

こんな感じ。使う前に自分が作ったものと何が違うのか確認してださい。
レベルUpしたいなら何がどうなったのか確認結果を書いて下さい。

#wait {
    animation: 3s linear videoload;
    animation-fill-mode: forwards;
}

@keyframes videoload {
    0% {
        opacity: 100;
    }

    100% {
        opacity: 0;
    }
}

Comments

[退会済みユーザー]

うまく動きました。
ありがとうございます。
3秒間画像を表示し、パッと消えるアニメーションは製作できるのでしょうか。

[oikashinoa]

徐々に消えていくでなく、3秒後に…ってことですか？
@keyframesを理解すれば出来ますよ

[退会済みユーザー]

3秒後にパッと消えるようにです。
理解すればできるのですね....何度も申し訳ないのですがコードをいただくことは出来ませんか？

[oikashinoa]

レベルアップする気はないと理解しましたので、これ以上の発言はやめます。