この記事ではCSSアニメーションについて解説をしながらサンプルを掲載していきます。
- CSSは書けるけどアニメーションは詳しくない。
- CSSのアニメーションに興味がある。
- だけどどう実装すればいいかわからない……
主にコーダーの方、初心者フロントエンドエンジニアの方が対象です。
CSSで再現でき、使用頻度が高く、よく使用されているアニメーションのサンプルを紹介します。
こちらもすすめ：【コピペ改変OK】CSSだけで作れるボタンデザイン10選
CSSのアニメーション
CSSのアニメーションに関わるプロパティはトランジション（transition）とアニメーション(animation）があります。
トランジション（transition）プロパティ
何らかのアクションを起こしてから時間をかけて変化させるということを書くことができます。
例えば、カーソルを当てたときに文字色を白から黒にふわっと変えたりできます。
また、トランジションプロパティは複数のプロパティをまとめて書くことができるショートハンドプロパティです。
transition-property … トランジション効果CSSプロパティを指定（デフォルト：all）
transition-duration … トランジションによるアニメーションが完了するまでの時間（デフォルト：0s）
transition-timing-function … トランジションの中間状態（デフォルト：ease）
transition-delay … トランジションが開始されるまでの待ち時間(デフォルト：0s）
以下のように4つのプロパティを半角スペースで区切って書きます。
transition: all 0.1s ease 0.1s;
記述を省略するとデフォルトの値が入ります。
参考：これで使いこなせる！CSSできるtransitionの使い方
アニメーション（animation）プロパティ
アニメーションプロパティはトランジションプロパティより指定できる項目が多くなります。アニメーションを無限ループさせることも可能です。キーフレーム（@keyframes）を使えば、アニメーションの中間状態をより細かく制御できます。
アニメーションプロパティも、複数のプロパティをまとめて書けるショートハンドプロパティです。
animation-name … 使用するキーフレームの名前（デフォルト：none）
animation-duration … アニメーションが完了するまでの時間（デフォルト：0s）
animation-timing-function … アニメーションの中間状態（デフォルト：ease）
animation-delay … アニメーションが開始されるまでの待ち時間（デフォルト：0s）
animation-iteration-count … アニメーションさせる回数（デフォルト：1）
animation-direction … アニメーションの再生方向（デフォルト：normal）
animation-fill-mode … アニメーションの実行前後のスタイル（デフォルト：none）
animation-play-state … アニメーションが実行中か停止中かの指定（デフォルト：running）
各ブラウザの対応状況
IEについては、トランジションもアニメーションもIE10〜の対応となっています。
Can I use… を見ると、シェア数はそこまで多くありませんが、ベンダープレフィックスは -webkit- があると親切そうです（2018年9月現在）
https://caniuse.com/#feat=css-transitions
https://caniuse.com/#feat=css-animation
この記事ではベンダープレフィックスは書かずに紹介していきます。
サンプルについて
基本的にJavaScriptいらずでCSSでのみ表現したものを紹介します。コピペもカスタマイズもOKです。
サンプル：【基本】hover時のリンク色をふわっと変更
リンクへカーソルを当てたときにふわっと色を変える方法です。
See the Pen css-transition-link_basic by beco (@becolomochi) on CodePen.
HTML
a要素に、linkというクラスをつけてあります。
<a class="link" href="#">リンク</a>
CSS
まずは変化する前を書きます。
.link {
color: #03A9F4;
transition: 0.2s;
}
linkクラスにまずはごく普通に通常時の色（水色）を設定します。
さらにトランジションプロパティを書きます。ここではtransition: 0.2sとしています。0.2sは200ミリ秒のことで、transition-durationを設定しています。
これは、200ミリ秒かけてリンクのスタイルを変えるという意味になります。
transitionプロパティに書くことができる他のプロパティの値は省略しているため、以下のデフォルト値が入ります。
- transition-property には all
- transition-timing-function には ease
- transition-delay には 0
がそれぞれ入っています。
そして、linkクラスの:hover擬似クラスに、カーソルが当たったときの設定を書きます。
.link:hover {
color: #3f51b5;
}
紺色になるよう設定しました。
表示が変化する前のタグに、transitionを書く。
サンプル：ボタン風リンクのアニメーション
基本のリンクを元にボタン風のスタイルをつけたものです。
See the Pen css-transition-link_advance by beco (@becolomochi) on CodePen.
HTML
HTML側は一つ前のサンプルの基本のリンクとほぼ変わらずです。クラス名をbtn-linkに変更しました。
<a href="#" class="btn-link">リンク</a>
CSS
CSSの記述量が一気に増えました。少しずつ見ていきましょう。アニメーションにかかわらない装飾のスタイルを省略してありますので、すべての内容はCodepenを参照してください。
.btn-link {
/* 装飾のスタイル */
/* ...省略... */
/* 動作に関わるスタイル */
position: relative;
top: 0;
background-color: #03A9F4;
transition: background-color 0.2s;
}
動作に関わるスタイルは、以下を変更するための設定です。
- 位置を指定するpositionプロパティとtopプロパティ
- 背景色を変更するbackground-colorプロパティ
topプロパティはアニメーションさせたくなかったので、transitionプロパティにbackground-colorを指定しました。これはtransition-propertyの値になります。
0.2sはtransition-durationの値です。200ミリ秒かけてアニメーションします。
次は、カーソルが当たったときの:hover擬似クラスです。
.btn-link:hover {
background-color: #3f51b5;
}
紺色に設定してあります。
最後は、クリックしたときの:active擬似クラスです。
.btn-link:active {
background-color: #03A9F4;
top: 1px;
}
背景色を水色にし、位置を1px下に移動するよう設定してあります。
アニメーションさせたくないプロパティがある場合、アニメーションさせたいプロパティだけtransitionプロパティに書くようにします。
指定がない場合はデフォルト値のallになるので、すべてのプロパティがアニメーションします。
サンプル：ボタン（button）要素のアニメーション
hover時・active時にに背景色がアニメーションして変わるbutton要素のサンプルです。
See the Pen css-transition-button by beco (@becolomochi) on CodePen.
HTML
button要素にbtnというクラスをつけてあります。
<button type="button" class="btn">ボタン</button>
CSS
先にbutton要素のデフォルトのスタイルを削除してあります。スタイルがつけやすくなるためです。
button {
/* スタイルをリセット */
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
cursor: pointer;
padding: 0;
background-color: transparent;
font-size: 16px;
}
あとはボタン風リンクと同様に、.btn（通常時） → :hover → :active の順にスタイルを用意します。
.btn
.btn {
border-radius: 4px;
color: #fff;
background-color: #2196f3;
padding: 4px 16px;
position: relative;
top: 0;
transition: background-color 0.2s;
}
:hover（カーソルがあたったとき）
.btn:hover {
background-color: #64b5f6;
}
:active（クリックしたあと）
.btn:active {
background-color: #2196f3;
top: 1px;
}
サンプル：ラジオボタンのアニメーション
ラジオボタンを選択したときにアニメーションするサンプルです。
See the Pen css-transition-radio by beco (@becolomochi) on CodePen.
HTML
ラジオボタンの見た目をしたスタイルをつくるために、input要素はlabel要素の外にしてあります。
<input type="radio" class="toggle-radio" id="test1" name="test-form"> <label class="toggle-radio-label" for="test1">ラジオ1</label> <input type="radio" class="toggle-radio" id="test2" name="test-form"> <label class="toggle-radio-label" for="test2">ラジオ2</label>
CSS
分割して説明します。
まず、ラジオボタンを非表示にします。
.toggle-radio {
display: none;
}
次に、ラベルのスタイルを設定します。
.toggle-radio-label {
cursor: pointer;
margin-right: 1em;
position: relative;
padding-left: 18px;
font-size: 16px;
}
cursor: pointer;でカーソルが当たったときにカーソルの形状を指先に変更します。
position: relative;とpadding-left: 18px;で、ラジオボタン風のスタイルを表示するための余白を作ります。
ラベルの::before疑似要素と::after疑似要素でラジオボタンのスタイルを作ります。
::before、::afterは、:before、:after（コロン1つ）でもOKですが、ここでは擬似クラスと区別するためにCSS3から導入されたコロン2つでの記述にします。
::before
::before疑似要素はラジオボタンの外枠部分、白抜きの円です。
位置の指定を、position: absolute;top: 0;left: 0;で絶対位置に指定しています。
.toggle-radio-label::before {
content: '';
position: absolute;
top: 0;
left: 0;
/* ... 省略 ... */
background-color: #fff;
transition: background-color 0.2s;
}
::after
::after疑似要素はラジオボタンの選択したときに現れる黒丸の部分です。
::before疑似要素と同様に絶対位値で位置を指定しますが、円の真ん中に表示するためにtop: 3px;left: 3px;と位置をずらしています。
transform: scale(0);でラジオボタンが選択されていない場合のスタイルです。丸が見えない状態です。
transition: transform 0.2s;でアニメーションを設定しています。
.toggle-radio-label::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
/* ... 省略 ... */
transform: scale(0);
transition: transform 0.2s;
}
選択したときのスタイル
最後に選択されたときのスタイルを設定してあります。
.toggle-radio:checked + .toggle-radio-label:after {
transform: scale(1);
}
指定がややこしくなってきました。分割して見てみます。
.toggle-radio:checked + .toggle-radio-label:after {についてですが、.toggle-radio:checkedは、ラジオボタンが選択されているときのことです。そして、+は直下の要素を指します。ということは、ラジオボタンが選択されているときのラベルの:after疑似要素、という意味になります。
transform: scale(1);でtransform要素の scaleで1倍（100％）表示するようにしてあります。
サンプル：チェックボックスでトグルのアニメーション
少しコツがいりますがチェックボックスのトグルも作ることができます。
See the Pen css-transition-checkbox by beco (@becolomochi) on CodePen.
HTML
スタイルをつくるために、input要素はlabel要素の外にしてあります。input要素にはid属性を、label要素にはfor属性を忘れないようにしてください。
<input type="checkbox" class="toggle-checkbox" id="test"> <label class="toggle-checkbox-label" for="test">トグル</label>
CSS
まずチェックボックスを非表示にします。
.toggle-checkbox {
display: none;
}
ラベルにトグルのスタイルを作ります。
.toggle-checkbox-label {
cursor: pointer;
position: relative;
padding-left: 52px;
font-size: 24px;
}
::before疑似要素がトグルの外枠です。
transition: background-color 0.2s; で背景を200ミリ秒かけて変更できるよう記述しました。
.toggle-checkbox-label::before {
/* ... 省略 ... */
background-color: #fff;
transition: background-color 0.2s;
}
::after疑似要素はトグルのON/OFFを表現します。
transition: background-color 0.2s, left 0.2s; で、背景と位置を200ミリ秒かけて変更できるようにしました。複数のプロパティを書きたい場合はカンマ（,）区切りで書きます。
.toggle-checkbox-label::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
/* ... 省略 ... */
background-color: #ccc;
transition: background-color 0.2s, left 0.2s;
}
最後に、トグルがONになったとき、すなわちチェックボックスにチェックが入ったときのスタイルを記述します。
.toggle-checkbox:checked + .toggle-checkbox-label::before {
background-color: #bbdefb;
border-color: #2196f3;
}
.toggle-checkbox:checked + .toggle-checkbox-label::after {
background-color: #2196f3;
left: 27px;
}
細かい指定が必要ですが、トグルのアニメーションもCSSだけで作ることができました。
サンプル：ナビゲーションの装飾
カーソルを当てると下線が現れるナビゲーションです。
See the Pen css-transition-tab by beco (@becolomochi) on CodePen.
HTML
<nav>
<ul>
<li><a href="#" class="item">item</a></li>
<li><a href="#" class="item">item</a></li>
<li><a href="#" class="item">item</a></li>
<li><a href="#" class="item">item</a></li>
<li><a href="#" class="item">item</a></li>
</ul>
</nav>
CSS(SCSS)
liの::after疑似要素で下線を用意します。
&::after {
content: '';
display: block;
height: 2px;
background-color: #333;
transform: scale(0);
transition: transform 0.2s 0.1s;
}
transition: transform 0.2s 0.1s;で、0.1秒待ってから0.2秒かけてアニメーションするようにしてあります。
カーソルを当てる前はtransform: scale(0);で下線を非表示にします。
:hoverで::after疑似要素を表示するようにします。
&:hover::after {
transform: scale(1);
}
}
a要素はbackground-colorをtransitionでアニメーションするようにしてあります。
a {
/* ... 省略 ... */
background-color: #fff;
transition: 0.2s;
&:hover {
background-color: #f2f2f2;
}
&:active {
background-color: #eee;
}
}
サンプル：ローディングアニメーション
アニメーションプロパティを使った、ローディングアニメーションのサンプルです。
See the Pen css-animation-loading by beco (@becolomochi) on CodePen.
HTML
dotクラスのdivがアニメーションされます。
<div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
CSS(SCSS)
まず、.dotクラスの基本のデザインを書きます。
.dot {
display: inline-block;
margin: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
アニメーションはSCSSの@forを使って、.dotクラスのひとつずつのアニメーションの開始時間を0.1秒ずつずらすようにしました。
@for $i from 1 through 4 {
$delay: $i * 0.1;
.dot:nth-child(#{$i}) {
animation: 1s fade infinite #{$delay}s;
}
}
分解すると以下のようになります。
.dot:nth-child(1) { animation: 1s fade infinite 0.1s; }
.dot:nth-child(2) { animation: 1s fade infinite 0.2s; }
.dot:nth-child(3) { animation: 1s fade infinite 0.3s; }
.dot:nth-child(4) { animation: 1s fade infinite 0.4s; }
1秒かけて、fadeというキーフレームを使って無限にアニメーションするという指示になっています。
fadeキーフレームは、透明度と大きさをアニメーションするよう指示してあります。
@keyframes fade {
from { opacity: 0;transform: scale(0); }
to { opacity: 1;transform: scale(1); }
}
サンプル：フルスクリーンメニュー
記述量が多いのでCSSはSCSSを、メニューの開閉を判断するためにJavascriptをjQueryを使って記述しています。
ボタンの作成
まず、クリックすると三本線のハンバーガーメニューが×印になるボタンを作りました。
See the Pen css-transition-menu-btn by beco (@becolomochi) on CodePen.
HTML
アニメーションさせるアイコンはspan要素で作っています。
<button class="toggle-btn" id="menu-btn"><span class="toggle-icon"></span></button>
CSS(SCSS)
ポイントとなる部分をピックアップして解説します。すべての内容はCodepenを参照してください。
3本ラインは、
- .toggle-iconクラス
- ::before疑似要素
- ::after疑似要素
で1本ずつラインを作り、transformプロパティのtranslateYで位置の調整をしています。
.toggle-icon
バツ印になったときに消したいので、transitionはbackground-colorを指定しました。
/* ... 冒頭は省略 */
.toggle-icon {
cursor: pointer;
position: relative;
width: 32px;
height: 2px;
background-color: #333;
content: '';
display: inline-block;
transition: background-color 0.2s;
::before
バツ印になったときに回転させたいので、transitionはtransformを指定します。
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 32px;
height: 2px;
background-color: #333;
transform: translateY(-8px);
transition: transform 0.2s;
}
::after
こちらもバツ印では回転させたいのでtransitionにtransformを指定します。
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 32px;
height: 2px;
background-color: #333;
transform: translateY(8px);
transition: transform 0.2s;
}
最後に、バツ印になったときのスタイルを作ります。
- 真ん中に配置された.toggle-iconのラインは透明にして非表示に
- 一番上の::before疑似要素のラインは右回転し45度の傾斜をつける
- 一番下の::after疑似要素のラインは左回転し45度の傾斜をつける
これをis-openクラスがbutton要素に付与されたときのスタイルとして書きます。
.is-open {
.toggle-icon {
background-color: transparent;
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
}
JavaScript(jQuery)
JavaScriptで制御します。今回はDOMの操作だけなので簡単に書けるjQueryを使いました。
メニューボタン（#menu-btn）が押されたときにis-openクラスが付いたり消えたりするようにします。
$('#menu-btn').on('click', function(){
$(this).toggleClass('is-open');
})
ここまでボタンの解説でした。次に、メニューを実装します。
メニュー部分の作成
続いて、ボタンを押すと表示されるメニュー部分を作ります。
See the Pen css-transition-menu-jquery by beco (@becolomochi) on CodePen.
HTML
<button class="toggle-btn" id="menu-btn"><span class="toggle-icon"></span></button>
<div class="menu-box" id="menu">
<nav class="menu-box-nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">infomation</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>
CSS(SCSS)
動作に関わるものだけ解説します。
まずはmenu-boxは非表示にしたいので、transformプロパティのtranslateYにマイナスの値を入れて画面の外に追いやるようにします。
そしてアニメーションの指示をtransitionで設定します。
.menu-box {
transform: translateY(-100%);
transition: 0.3s;
/* ... 省略 */
}
ボタンが押されたときの表示を書きます。
.menu-box.is-open-menu {
transform: translateY(0);
}
JavaScript(jQuery)
JavaScript（jQuery）でボタンが押されたときにメニューにis-open-menuクラスが付いたり消えたりするようにします。
$('#menu-btn').on('click', function(){
$(this).toggleClass('is-open');
$('#menu').toggleClass('is-open-menu'); // ←追加
})
JavaSctipt側はクラスの付与の切り替えのみで、簡単にメニューの開閉が実現できました。
他のアニメーションライブラリの紹介
さらにCSSアニメーションのバリエーションを方へ、参考になるライブラリを紹介します。
Hover.css
リンクやボタンなど、カーソルを当てたとき（hover）のアニメーションのライブラリです。吹き出しや影がつくスタイルもあります。（MITライセンス。ただし商用利用は制限あり）
Hover.css
Animate.css
クラスと追加するだけで、ページを表示したときやスクロールしたときに要素をアニメーション表示できます。（MITライセンス）
Animate.css
Loaders.css
様々なローディングアニメーションのライブラリです。（MITライセンス）
Loaders.css
まとめ
CSSで表現できるアニメーションのサンプルを紹介しました。
アニメーションは使いすぎても見づらくなってしまうので、ここぞというときに効果的に使うことを意識するとよいかと思います。心地よいアニメーションを使ってよりよいサイトづくりに活かしてください。
参考
transition – CSS: カスケーディングスタイルシート | MDN
CSS アニメーションの利用 – CSS: カスケーディングスタイルシート | MDN
一般兄弟結合子 – CSS: カスケーディングスタイルシート | MDN
