CSSのkeyframesを使って下から上にフェードインする方法をご紹介します。
Contents
keyframesを使って下から上にフェードインするCSSの記述
※フェードインするエリア(.mv)と下から上にフェードインする演出(.fade-up、@keyframes fadeinup)を用意します。その他、必要に応じて変更して下さい。
<style> body{ padding: 0; margin: 0; text-align:center; } h1{ line-height:1.6em; text-align:center; font-weight:bold; padding: 15px 0 30px 0; font-size: 18px; } .mv{ width: 300px; height: 44px; margin: 0 auto; font-size: 32px; background-color: #333333; color: #ffffff; } .fade-up { opacity: 0; animation-name: fadeinup; animation-duration: 1.6s; animation-delay: .4s; animation-timing-function: ease-out; animation-fill-mode: forwards; } @keyframes fadeinup { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } </style>
CSSのkeyframesを使って下から上にフェードインするHTMLの記述
※フェードインさせたいエリアに下から上にフェードインする演出class(.fade-up)を設定します。
<h1>CSSだけで下から上にフェードイン【keyframes】</h1> <div class="mv fade-up"> <div class="fade-up">DAD UNION</div> </div>
CSSだけで下から上にフェードインするデモページ【keyframes】
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告