CSSだけで簡単に作れる 実際に使えるアニメーションの作り方
CSSだけで簡単アニメーションを作ろう！ふわっと表示させたり、ロード中のグルグル回るアニメーションなどいろんなアニメーションのやり方を解説しながら紹介しています。
個別にCSSを当てる必要がある場合は、要素の並ぶ順番を利用してCSSを当てる事が出来ます。 今回の場合はHTMLの「i」タグに対して、順番にCSSを当てていきます。 first-child 複数ある要素の中で最初のある要素に対してCSSを当てます。 nth-child(2) 複数ある要素の中で2番目のある要素に対してCSSを当てます。 last-child 複数ある要素の中で最後のある要素に対してCSSを当てます。
.menubutton i:first-child { } .menubutton i:nth-child(2) { } .menubutton i:last-child { 3本の白いバーの配置を調整 translate(X,Y)最後に白いバーを中央に配置するように調節します。 白いバーの大きさの半分(50%)を左上に戻す必要があります。 CSSプロパティの「transform」の値を「translate(-50%,-50%)」に設定して位置を調節します。
.menubutton i { position: absolute; left: 50%; transform: translate(-50%,-50%); .menubutton { position: fixed; top: 0; left: 0; z-index: 100; z-indexについてメニューボタンに マウスカーソルを乗せた際に、マウスカーソルを ポインターに変更します。
.menubutton { cursor: pointer; メニューボタンをクリックした時 .menubutton i { transition: all .5s メニューボタンを切り替える機能 function toggle() { document.querySelector('.menubutton').classList.toggle('open'); 'menubutton' クラスに'open'クラスを付加または消去する; クラスを付加・削除する機能を作るHTMLの「menubutton」クラスの要素に、メニューの表示・非表示を判別する目印を付けたり削除する機能を作ります。 HTMLの「menubutton」クラスの要素に、目印として「open」クラスを付加もしくは削除する機能をJavaScriptで作ります。 function toggle() 関数の名前を「toggle」に設定します。 document.querySelector('.menubutton') HTMLの中にある「menubutton」クラスがある要素を対象に操作します。 classList 対象のHTMLタグにクラスの操作します。 toggle('open') 対象のHTMLタグに「open」クラスがない時はクラスを付加して、反対に「open」クラスがある時はクラスを消去します。
function toggle() { document.querySelector('.menubutton').classList.toggle('open'); 'menubutton' のクラスがある要素に'open'クラスを付加または消去する;HTMLのタグに「onclick="toggle()"」を追加します。 先ほど作成した関数名「toggle」を、クリックを検知した際に関数を呼び出すようにします。 クリックで呼び出された関数名「toggle」が実行されると、HTMLの「menubutton」クラスの要素に「open」クラスが付加・削除されるようになります。
・・・ .menubutton i:first-child { } .menubutton.open i:first-child { top: 50%; transform: translate(-50%,-50%) rotate(45deg); .menubutton i:last-child { } .menubutton.open i:last-child { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); .menubutton i:nth-child(2) { } .menubutton.open i :nth-child(2) { transformの値がなぜ2つある？ .menubutton i { transform: translate(-50%,-50%); } .menubutton i:first-child { /* 下にズレるからNG */ transform: rotate(45deg); .menubutton i { transform: translate(-50%,-50%); } .menubutton i:first-child { /* これならズレないのでOK */ transform: translate(-50%,-50%) rotate(45deg); ドロワーメニュー function toggle() { document.querySelector('.menubutton').classList.toggle('open'); document.querySelector('.menu').classList.toggle('open'); /* メニューボタン */ .menubutton { . } .menubutton i { . } .menubutton i . { . } .menubutton.open i . { . } /* メニュー */ .menu {position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: white; transition: all .5s;
margin: 40px 0 0 0; padding: 0; list-style: none; padding: 5px 0; text-align: center;- About
- Access
- Recruit
- Contact
- About
- Access
- Recruit
- Contact
- About
- Access
- Recruit
- Contact
- About
- Access
- Recruit
- Contact
- About
- Access
- Recruit
- Contact
HTMLの「menu」クラスの要素に、目印として「open」クラスを付加もしくは削除する機能をJavaScriptで作ります。 先ほどメニューボタンで作った「toggle」関数の中に機能を追加していきます。 function toggle() 関数の名前を「toggle」に設定します。 document.querySelector('.menu') HTMLの中にある「menu」クラスがある要素を対象に操作します。 classList 対象のHTMLタグにクラスの操作します。 toggle('open') 対象のHTMLタグに「open」クラスがない時はクラスを付加して、反対に「open」クラスがある時はクラスを消去します。
function toggle() { document.querySelector('.menu').classList.toggle('open'); 'menubutton' のクラスがある要素に'open'クラスを付加または消去する; ・・・「left: -100% 」で画面の外に飛ばしていたメニューを「 left: 0 」で戻します。
遅延アニメーション function toggle() { document.querySelector('.menubutton').classList.toggle('open'); document.querySelector('.menu').classList.toggle('open'); /* メニューボタン */ .menubutton { . } .menubutton i { . } .menubutton i . { . } .menubutton.open i . { . } /* メニュー */ .menu {position: fixed; top: 0; left: -200px; width: 200px; height: 100vh; background: white; transition: all .5s;
margin: 40px 0 0 0; padding: 0; list-style: none; padding: 5px 0; text-align: center; margin-left: -20px; opacity: 0; transition: all .5s; } .menu.open li { margin-left: 0; opacity: 1; } .menu.open li:first-child { transition-delay: .5s; } .menu.open li:nth-child(2) { transition-delay: .7s; } .menu.open li:nth-child(3) { transition-delay: .9s; } .menu.open li:nth-child(4) { transition-delay: 1.1s;- About
- Access
- Recruit
- Contact
- About
- Access
- Recruit
- Contact
position: fixed; top: 0; left: -200px; width: 200px; height: 100vh; background: white; transition: all .5s;
メニューリストの動作- About
- Access
- Recruit
- Contact
複雑なアニメーション
ローディングスピナー class="spinner">width: 50px; height: 50px; border: solid 5px transparent; border-bottom-color: #01558d; border-radius: 50%; animation: guru-guru 1s linear infinite;
@keyframes guru-guru { transform: rotate(0); transform: rotate(360deg); ローディングスピナーのデザイン まずは「50px」の正方形を作ります。 width: 50px; height: 50px; 透明のボーダーを作る 正方形の周りに「5px」のボーダーを作成します。 ボーダーの色は、透明を意味する「transparent」を指定します。 border: solid 5px transparent; 下のボーダーのみに色を入れる透明のボーダーの下の部分のみを紺色に変更します。 下のボーターの色を変える場合は、CSSプロパティの「border-bottom-color」で色を変更することが出来ます。 今回は、紺色のボーダーを作るため、値にカラーコードの「#01558d」に指定します。
border: solid 5px transparent; border-bottom-color: #01558d; 最後に正方形から円形に変更します。 border-radius: 50%; 回転アニメーションを作る @keyframes guru-guru { transform: rotate(0); transform: rotate(360deg); アニメーション名: guru-guru アニメーション時間: 1s (1秒) 変化の速さ: linear (一定) 繰り返し回数: infinite (無限) animation: guru-guru 1s linear infinite; animation: guru-guru 1s; animation: guru-guru 1s ease; animation: guru-guru 1s ease-in; animation: guru-guru 1s ease-out; animation: guru-guru 1s ease-in-out; animation: guru-guru 1s linear; animation: guru-guru 1s linear; animation: guru-guru 1s linear 3; 「infinite」の場合 animation: guru-guru 1s linear infinite; フェードイン function toggle() { document.querySelector('.hello').classList.toggle('open'); height: 300px; display: flex; justify-content: center; align-items: center;width: 80px; font-size: 14px; background: #920000; color: white; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.5s;
} .switch:hover { background: #f05050;width: 200px; height: 150px; background: #01558d; color: white; display: flex; justify-content: center; align-items: center; opacity: 0;
opacity: 1; animation: Fade-In 1s; @keyframes Fade-In { opacity: 0; transform: translateY(30px); opacity: 1; transform: translateY(0); アニメーション開始のタイミング function toggle() { document.querySelector('.hello').classList.toggle('open'); 'hello' クラスに'open'クラスを付加または消去する; アニメーションの準備 フェードインのアニメーションを作る @keyframes Fade-In { opacity: 0; transform: translateY(30px); opacity: 1; transform: translateY(0); animation: Fade-In 1s; アニメーションが終わった時今回の例ではアニメーション開始前は、要素を「 opacity: 0 」で透明した状態にしていました。
アニメーション終了後は再び「opacity: 0 」戻ってしまうので、openクラスがある時は「 opacity: 1 」で要素を不透明に上書きをします。
opacity: 1; animation: Fade-In 1s; アニメーション終了後の状態を維持する animation: Fade-In 1s; animation-fill-mode: forwards; } @keyframes Fade-In { スクロールアナウンス .scroll-icon {position: relative; width: 60px; height: 100px; border: solid 4px black; border-radius: 30px; box-sizing: border-box;
} .scroll-icon .dot {position: absolute; top: 20px; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; background: black; border-radius: 50%; opacity: 0; animation: announce 1.5s linear infinite;
} .scroll-icon .text { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 20px; @keyframes announce { top: 10px; opacity: 0; top: 80px; opacity: 0; top: 80px; opacity: 0; スクロールアナウンスアイコンのベースとなる輪郭を作成します。 横幅「60px」高さ「100px」の長方形を作成して、さらに「4px」の大きさのボーダーを作成します。 そして、長方形の角を横幅の半分の大きさである「30px」の大きさで角を丸めます。 また、要素の大きさの基準をボーダー領域も含ませるため、CSSプロパティ「box-sizeing」の値を「border-box」に指定します。
.scroll-icon { width: 60px; height: 100px; border: solid 4px black; border-radius: 30px; box-sizing: border-box;直径「10px」の黒い丸い点を作成します。 そして「scroll-icon」の要素をドット配置の基準にするため「 position: relative 」を設定しておきましょう。 作成した丸い点を、上から「20px」左から「50%」の位置に配置して、さらに「translate(-50%,-50%)」で位置を微調整します。 また、アニメーションの際にドットを表示したいので、ドットをあらかじめ透明にしておきます。
.scroll-icon { position: relative; } .scroll-icon .dot {position: absolute; top: 20px; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; background: black; border-radius: 50%; opacity: 0;
アイコンの下に「Scroll」のテキストを作成します。 フォントサイズを「20px」の大きさにして、テキストがアイコンの下に来るように「 top: 100% 」で配置します。 .scroll-icon { position: relative; } .scroll-icon .text { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 20px; ドットが上から下に移動するようにします。 ドットの位置を「top: 10px」から「top: 80px」まで移動します。 ドットがその場に止まり続けるようにします。 ドットの位置を「top: 80px」で停止した状態にします。 透明な状態のドットを徐々に戻していきます。 ドットの透明度を「opacity: 0」から「opacity: 1」へ変化させます。 ドットが常に見える状態にします。 ドットの透明度を常に「opacity: 1」にします。 ドットを徐々に透明にしていきます。 ドットの透明度を「opacity: 1」から「opacity: 0」へ変化させます。 ドットを透明のままにします。 ドットの透明度を「opacity: 0」のままにします。 @keyframes announce { top: 10px; opacity: 0; top: 80px; opacity: 0; top: 80px; opacity: 0; アニメーションの設定 .scroll-icon .dot { animation: announce 1.5s linear infinite;擬似要素を使う
擬似要素とは .wizard::before { content: 'Before魔人'; } .wizard::after { content: 'After魔人'; ::before 要素使い ::after content: "☆"; color: #920000; content: "!!"; color: #01558d; content: "☆"; color: #920000; content: "!!"; color: #01558d; display: flex; align-items: center; } li::before, li::after {content: ""; width: 10px; height: 10px; display: block; background: #01558d; transform: rotate(45deg);
注釈を入れる こちらの商品は9800円※です。 消費税は含まれていません。 時期によって価格が変動する可能性があります。 お一人様３箱までとさせていただきます。 margin: 0; padding-left: 5px; border-left: solid 4px #920000; font-size: 16px; color: #920000; } .notes::before { .notes::before { パンくずリストdisplay: flex; list-style: none; margin: 0; padding: 0; border-bottom: dashed 2px #01558d; font-size: 20px;
} .breadlist li { } .breadlist li::after { content: '>'; margin: 0 5px; } .breadlist li:last-child::after { display: none ; リストを横並びにする display: flex; border-bottom: dashed 2px #01558d; リストの後に「>」を入れる .breadlist li::after { content: '>'; margin: 0 5px; 最後のリストの「>」を非表示 .breadlist li:last-child::after { display: none; 見出しデザインヒツジの勉強部屋
ヒツジは約1年かけて本でWeb制作について学びました。
.head-design { position: relative; padding-left: 25px; border-bottom: solid 1px #ababab; } .head-design::before {position: absolute; content: ""; top: 50%; left: 0; width: 12px; height: 12px; transform: translateY(-10px); background: #01558d; border-radius: 50%;
} .head-design::after {position: absolute; content: ""; top: 50%; left: 10px; width: 10px; height: 10px; background: #2798e4; border-radius: 50%;
見出しの左側に余白を作る 見出しの左側に「25px」の余白を作ります。 .head-design { padding-left: 25px; 擬似要素で2つの円を作成する 擬似要素の「Before要素」と「After要素」で、大きさと色が異なる円を2つ作ります。 .head-design::before { content: ""; width: 12px; height: 12px; background: #01558d; border-radius: 50%; } .head-design::after { content: ""; width: 10px; height: 10px; background: #2798e4; border-radius: 50%; ２つの円を中央付近に配置見出しの「head-design」クラスに対して、CSSの「 position: relative 」を追加します。 擬似要素の円を見出しの左側に寄せて、さらに上下方向の中央線の下に来るように「 top: 50% 」で配置します。 また、明るい青の「After要素」の円を、左から「10px」移動したところに配置します。
.head-design { position: relative; padding-left: 25px; } .head-design::before { position: absolute; content: ""; top: 50%; left: 0; } .head-design::after { position: absolute; content: ""; top: 50%; left: 10px; 暗い青の「Before要素」の円を、現在の位置から「10px」上にズラします。 上下方向の中央線の上に来るように配置します。 .head-design::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-10px); 見出しの下に薄い灰色の線を引きます。 .head-design { border-bottom: solid 1px #ababab;上級アニメーション
リストアニメーション margin: 40px auto; padding: 0; list-style: none; max-width: 400px; position: relative; margin: 12px 0; padding-left: 20px; cursor: pointer; .mokuji li::before, .mokuji li::after { position: absolute; content: ''; background: #01558d; transition: all .2s; } .mokuji li::before { top: calc(50% - 5px); left: 0; width: 10px; height: 10px; transition-delay: .2s; } .mokuji li::after { top: 100%; left: 10px; width: 0; height: 2px; transition-delay: 0s; .mokuji li:hover::before { top: 100%; height: 2px; transition-delay: 0s; } .mokuji li:hover::after { width: 100%; transition-delay: .2s;- CSSについて
- CSSの書き方
- CSSテクニック
- CSSの注意点
擬似要素の「Before要素」を使って、紺色の大きさ「10px」の正方形を作成します。 リストに「position: relative 」を追加して、Before要素が上下方向の中央に来るように配置します。 CSSの「calc関数」を使って、リストの上から「50%」の位置まで移動して、その後正方形の半分の大きさ「5px」を上に戻すようにして配置します。
position: relative; padding-left: 20px; } .mokuji li::before {position: absolute; content: ''; top: calc(50% - 5px); left: 0; width: 10px; height: 10px; background: #01558d;
After要素をリストの下に置く擬似要素の「After要素」を使って、紺色の細い線をリストの下に配置します。 リストの下に来るように「top: 100% 」で下まで移動して、さらに左から「10px」の位置に「 left: 10px 」に配置します。 After要素の横幅はあらかじめ「width: 0 」にしておき、リストをホバーした時に横幅を大きくしていきます。
position: relative; padding-left: 20px; } .mokuji li::after { position: absolute; content: ''; top: 100%; left: 10px; width: 0; height: 2px; background: #01558d; calc関数ってなに？ .mokuji li::before { position: absolute; content: ''; top: calc(50% - 5px); left: 0; calc関数を使わない方法 .mokuji li::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-5px); ホバーアニメーションリストの左側にあるBefore要素の正方形を、ホバーした時に「2px」まで潰して、さらに「 top: 100% 」でリストの下に移動します。
.mokuji li::before { top: calc(50% - 5px); left: 0; width: 10px; height: 10px; } .mokuji li:hover::before { top: 100%; height: 2px; After要素の変化リストの下にあるAfter要素の下線部を、ホバーした時に「 width: 100% 」まで広げます。
.mokuji li::after { top: 100%; left: 10px; width: 0; height: 2px; } .mokuji li:hover::after { .mokuji li::before, .mokuji li::after { transition: all .2s; アニメーションの遅延設定 .mokuji li::before { transition-delay: .2s; } .mokuji li:hover::before { transition-delay: 0s; After要素の遅延設定 .mokuji li::after { transition-delay: 0s; } .mokuji li:hover::after { transition-delay: .2s; .mokuji li:hover::before { transition-delay: 0s; } .mokuji li:hover::after { transition-delay: .2s; ホバー解除した時のCSS .mokuji li::before { transition-delay: .2s; } .mokuji li::after { transition-delay: 0s; 波紋エフェクト height: 200px; display: flex; justify-content: center; align-items: center; background: #a7dcff; position: relative; width: 120px; height: 120px; cursor: pointer; } .round::before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: #3992ce; border-radius: 50%; z-index: 2;
} .round::after {position: absolute; content: attr( data-text ) ; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 30px; color: white; z-index: 3;
.wave::before, .wave::after {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border: solid 2px white; border-radius: 50%; z-index: 1;
.round:hover .wave::before, .round:hover .wave::after { animation: wave 2s linear infinite; } .waves:hover .wave::after { animation-delay: .7s; @keyframes wave { width: 50px; height: 50px; opacity: 1; width: 100%; height: 100%; opacity: 0; width: 100%; height: 100%; opacity: 0; まずはアニメーションの範囲の基準となる基本フレームを作成します。 要素の大きさ「120px」の正方形を作ります。 この横幅・高さ「120px」の範囲が、波紋が広がる最大の範囲になります。 position: relative; width: 120px; height: 120px; 「round」クラスのBefore要素を使って、直径「60px」の円を作成します。 そして、作成した円を基本フレームの中央に来るように配置します。 .round::before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: #3992ce; border-radius: 50%;
テキストを円の上に重ねる「round」クラスのAfter要素を使って「Wave」というテキストを円の上に重ねていきます。 CSSプロパティの「left: 0」「right: 0」で左右を最大まで広げて、その後テキストを中央寄せします。 また、擬似要素の「content」の値に「attr()」という関数を使って、HTMLからCSSへ「Wave」というテキストを引き継いで表示させます。
.round::after {position: absolute; content: attr( data-text ) ; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 30px; color: white;
円とテキストの重なる順番の指定 円とテキストが重なる順番を「z-index」で指定します。 /* 円 */ .round::before { } /* テキスト */ .round::after { attr(data-text)ってなに？ content: attr( data-title ) ; content: attr( data-text ) ;waveクラスの擬似要素を使って、2つの波紋を作成します。 擬似要素の「Before要素」と「After要素」で直径「50px」の円を作成して、さらに白いボーダーを「2px」の大きさで作成します。 作成した２つの円を、基本フレームの中央に来るように配置します。
.wave::before, .wave::after {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border: solid 2px white; border-radius: 100%;