CSSだけで実装する@keyframesを使った各種フェードインアニメーション

こんにちは、トッド(Todd)です。

自分が運営しているブログサイトに動きあるレイアウトを実装したいと考える人はいるでしょう。

アニメーションがあればインパクトがあってかっこいい感じになりますよね?

今回は、CSSの中でも比較的新しく追加されたCSS3(CSS)の@keyframes規則を使ったフェードインアニメーションを実装してみよう!という内容になります。

[adchord]

CSSを使ってアニメーション効果を実装するとコードが長くなるため、ページ速度を気にする人には向いていないかもしれません。

アニメーションの実装が絡んでくるとJavaScriptなどのHTMLやCSSより高度だと考えられるプログラミング言語の知識が必要になる場合がありますが今回は、CSSのみを使用したものになります。

このCSS3を使ったアニメーションはスクロールビューポート単位での連動表示の選定が出来ません。そのためページが読み込まれた瞬間からアニメーションが始まります。よって自サイトのファーストビューでの活用をオススメします。

当ブログでは、「Top記事一覧」「記事内h1タイトル」「ソーシャルリスト」にそれぞれ効果を適応しているので雰囲気を見てみてください。

@keyframesで動きを作成しよう

 

フェードイン

ページが読み込まれた際に初めに表示されるのは0%。100%になるにつれて、フワッとした印象で徐々に表示されるシンプルなフェードイン。

/*フェードインアニメーション*/
@-webkit-keyframes fade-in {
    0% {opacity: 0}
    100% {opacity: 1}
}

 

スライドしながらフェードイン

さっきのフェードインに加えてスライドしながら表示される仕様です。transform: tranlateY(○○px);の数値を変更することでスライドの可動域を変更することが出来ます。

なお、以下のコードのマイナス100px部分の「ー」を消してあげると下から上へ動くアニメーションになります。

/*上から下へアニメーション*/
 @-webkit-keyframes toptounder{ 
 0%{ opacity: 0; 
 transform: translateY(-100px);
} 
100%{ opacity: 1;
 transform: translateY(0);
 }
}

こっちは右から左へスライドしながら表示されるフェードインで、作りは上記と同じになります。よって左から右に動くスライドにも変更可能になります。↓

/*右から左へアニメーション*/
 @-webkit-keyframes righttoleft{
 0%{ opacity: 0;
 transform: translate(50px);
 }
 100%{ opacity: 1;
 transform: translate(0);
 }
}

各要素に動きを与えよう

動きの作成が済んだので次は、上記でコピペしたコードをどの要素に対して機能させるか?になります。

例としてシンプルなフェードインをページ全体に反映するには、body要素に追加します。すると以下のようになります。

ページ全体にフェードイン

body{
 animation-name: fade-in;
 animation-duration: 2s;
 -webkid-animation-name: fade-in;/*一応*/
 -webkid-animation-duration: 2s;/*一応*/
}

animation-nameはどの動きの効果を使用するのか?上記で書いた「@keframesで動きを作成しよう」のところで記載している各アニメーション名は「fade-in」「toptodown」「righttoleft」になります。

animation-durationは、何秒かけてアニメーションを実行するのか?

 

例として、body要素にフェードインアニメーションを追加してみましたが、記事h1タイトルやソーシャルバーに付ける時にはスライドしながらフェードインするのがオススメです。

Fin.

コメントを残す

メールアドレスが公開されることはありません。