3minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketこんにちは、トッド(Todd)です。自分が運営しているブログサイトに動きあるレイアウトを実装したいと考える人はいるでしょう。アニメーションがあればインパクトがあってかっこいい感じになりますよね?今回は、CSSの中でも比較的新しく追加されたCSS3(CSS)の@keyframes規則を使ったフェードインアニメーションを実装してみよう!という内容になります。[adchord]CSSを使ってアニメーション効果を実装するとコードが長くなるため、ページ速度を気にする人には向いていないかもしれません。アニメーションの実装が絡んでくるとJavaScriptなどのHTMLやCSSより高度だと考えられるプログラミング言語の知識が必要になる場合がありますが今回は、CSSのみを使用したものになります。このCSS3を使ったアニメーションはスクロールビューポート単位での連動表示の選定が出来ません。そのためページが読み込まれた瞬間からアニメーションが始まります。よって自サイトのファーストビューでの活用をオススメします。h1タイトル」「ソーシャルリスト」にそれぞれ効果を適応しているので雰囲気を見てみてください。目次@keyframesで動きを作成しようフェードインスライドしながらフェードイン各要素に動きを与えようページ全体にフェードイン@keyframesで動きを作成しようフェードインページが読み込まれた際に初めに表示されるのは0%。100%になるにつれて、フワッとした印象で徐々に表示されるシンプルなフェードイン。1}}スライドしながらフェードインさっきのフェードインに加えてスライドしながら表示される仕様です。tranlateY(○○px);の数値を変更することでスライドの可動域を変更することが出来ます。以下のコードのマイナス100px部分の「ー」を消してあげると下から上へ動くアニメーションになります。}}こっちは右から左へスライドしながら表示されるフェードインで、作りは上記と同じになります。よって左から右に動くスライドにも変更可能になります。}}各要素に動きを与えよう動きの作成が済んだので次は、上記でコピペしたコードをどの要素に対して機能させるか?になります。例としてシンプルなフェードインをページ全体に反映するには、body要素に追加します。すると以下のようになります。2s;/*一応*/}animation-nameはどの動きの効果を使用するのか?上記で書いた「@keframesで動きを作成しよう」のところで記載している各アニメーション名は「fade-in」「toptodown」「righttoleft」になります。animation-durationは、何秒かけてアニメーションを実行するのか?例として、body要素にフェードインアニメーションを追加してみましたが、記事h1タイトルやソーシャルバーに付ける時にはスライドしながらフェードインするのがオススメです。MEDIA】僕がこのテーマでやってきたカスタマイズのまとめ集この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。