【CSS】ページ読み込み時にフワっとスライドフェードインするアニメーション

ブログなどでページを読み込んだ時にふわ〜っと記事のタイトルやヘッダーがスライドして出てくるのをよく見かけるようになりました。

最近このブログでも記事のタイトル部分だけ導入してみたんですが、リクエスト頂いたのでやり方をご紹介したいと思います。

CSSだけで手軽にできるので皆さんも挑戦してみてください。

CSSだけでアニメーション

今回はCSSの「animation」プロパティを使います。

<p class="sample-text1">下から上にススーっとフェードイン</p>

.sample-text1 {
    font-size: 20px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

上記のHTMLとCSSで実際に表示してみるとこのようになります↓

下から上にススーっとフェードイン

サンプルは「.sample-text1」とclass名を使ってますが、idでも何でも大丈夫です。

例えばヘッダーを上から、メインコンテンツは下から、サイドバーは横からスライド、なんてこともできますね。

「animation-iteration-count: infinite;」は無限ループさせる記述なので1回のみで終わる場合は削除してください。または「animation-iteration-count: 3;」など数値を入れると、その回数分アニメーションを繰り返します。

アニメーションを定義する

「animation-name」でアニメーション名を定義しますが、好きな英数字でオッケーです。今回は「fadein」にしています。

「@keyframes fadein」のように定義したアニメーション名を使用します。

「animation-duration」はアニメーションの長さを指定するプロパティで、今回は「2s」 なので「2秒」ということですね。

1sだとFirefoxでカクつきが目立ったりするので2sとしています。

@keyframesでアニメーションを制御

「@keyframes」はアニメーションの流れを制御するための記述です。「from」が開始、「to」が終了ですが、必要に応じて30%、70%など途中にもルールを増やすことができます。

「opacity」が透明度を指定するプロパティで、今回だと開始時に0.0（透明）、終了時に1.0（不透明）でフェードイン効果を表現しています。

他にも例えば「from { color:#000; }（黒）」、「to { color:#fff; }（白）」と指定すれば、黒から白へ色が変化するアニメーションが追加されます。

transformで変形を制御

「transform」は要素を変形させるプロパティです。移動(translate)、縮尺(scale)、回転(rotate)、傾斜(skew)、奥行き(perspective)、自由変形(matrix)など色々ありますが、今回は「移動(translate)」を使用しています。

「translateY」がY軸（縦方向）、「translateX」にするとX軸（横方向）の動きを指定できます。

今回だと開始時が「translateY(20px)」で下方向に20pxの位置、終了時が「translateY(0)」で元の位置に戻る指定ですね。

これを「translateY(-20px)」と負の値にすると、上方向に20px動くことになります。

ベンダープレフィックスはいらないよ

最近はブラウザのことを気にせずにCSSのアニメーションを気軽に使えるようになりました。「animation」プロパティは -webkit-、 -moz- などのベンダープレフィックスも必要なくなっています。

iOS 8.0以下と、Android 4以下に対応させる場合は -webkit-のベンダープレフィックスが必要ですが、2018年7月現在でiOS 8.0のシェアは0.5%、Android 4以下も10%未満なので無視して良いと思います。

もしAndroid 4系の人が見てもただアニメーションしないで表示されるだけなので、大した問題ではありません。

ということでCSSアニメーションのご紹介でした！ではまた〜♪