0から分かるCSSだけでフェードアウトしてみた
はじめに
お久しぶりです！今回は小ネタみたいなものですが、サイトに取り入れると少しかっこよくなる
「CSSによるフェードアウト」です！！
とても簡単なのでちらっと見ていってください(^^)/
この記事を読むとどうなるの？
→CSSでのフェードアウトの方法が分かる
どうやってやるの
①HTMLを作る（当たり前ですね）
何をするにしてもCSSを使うので、まずはHTMLを適当に作りましょうね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSSの読み込みを忘れないようにしましょうね-->
<link rel="stylesheet" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class = fadeout>
<img src = "画像やgifのURL">
</div>
</body>
</html>
②アニメーションを使おう
CSSでアニメーションを使うのであれば２つのことをする必要があります。
以下のコードを見ながら理解していきましょう！
.fadeout {
animation: fadeOut 2s; /*keyframesで命名したものを使う。2秒間で消える*/
animation-fill-mode: both; /*0%の時と100%の時の状態を保つ*/
}
@keyframes fadeOut {
0% {
opacity: 1; /*初めに存在する*/
}
100% {
opacity: 0; /*最後に消える*/
}
}
.fadeoutの部分について
animation: fadeOut 2s;
ここがアニメーションの全てです！
読んでの通り、アニメーションとして二秒間でフェードアウトしますよっていうコードです。
animation-fill-mode: both;
これはフェードアウトする前とした後の状態をずっと継続させるというコードです。
これをかかないとフェードアウトしても消えた状態が維持されません。
ここまでは大丈夫でしょうか？
これだけでできたら楽勝なのですが流石にそこまで単純ではありません。
fadeOutの部分が何を表すのかを書かなければなりません。
keyframes部分について
keyframesというものを使ってどのようなアニメーションをさせるのかを決めないといけないのです。
次のように書きます
@keyframes 任意の名前 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
今回はフェードアウトをするのでfadeOutという名前をつけたというだけです。
0%と100%というのは「最初」と「最後」を表しています。
opacityは「存在するかしないか」を表していて、１は存在、０は存在しないということです。
最後に
久しぶりに書いた記事ですがいかがだったでしょうか
皆さんもフェードアウトを使ってサイトをかっこよくしましょう！！
Author And Source
この問題について(0から分かるCSSだけでフェードアウトしてみた), 我々は、より多くの情報をここで見つけました https://qiita.com/ryusei172525/items/85a4bf564a55c4b6834f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .