この記事はウェブクルー Advent Calendar 2018の11日目の記事です。
昨日は@piwiさんの「Expo SnackでReact Native入門(とりあえず試したい人向け)」でした。

はじめに

サイトのUI改善としてアニメーションが用いられることがあります。
昨今、CSSアニメーションで色々な表現ができるようになりました。
ここではCSSだけで実装できる色々なアニメーションをご紹介したいと思います。

アニメーションの基礎

CSSアニメーションを実装するにはtransition（トランジション）とanimation（アニメーション）の2つの方法があります。

■transition

transitionプロパティは、トランジション効果（時間的変化）をまとめて指定する際に使用し、ホバーなどをきっかけにアニメーションが開始されます。

/* 変化対象のCSS */
transition-property:all;

/* 変化の時間 */
transition-duration:0s;

/* 変化の速度 */
transition-timing-function:ease;

/* 変化開始までの時間 */
transition-delay:0s;

/* ショートハンド */
transition:変化対象のCSS 時間 速度 開始時間;

/* 例：画像をホバーしたら0.2秒待って0.5秒かけてふわっとしたスピード（ease）で透過する */
img {
	transition: all 0.5s ease 0.2s;
}
img:hover {
	opacity:0.7;
}

■animation

animationプロパティは、キーフレームを用いたアニメーションをまとめて指定する際に使用し、細かいアニメーションが実装できます。

/* アニメーションの名前（任意） */
animation-name:none;

/* アニメーションの時間 */
animation-duration:0;

/* アニメーションの速度 */
animation-timing-function:ease;

/* アニメーションの実行回数 */
animation-iteration-count:1;

/* アニメーションの開始時間 */
animation-delay:0;

/* ショートハンド */
animation:アニメーションの名前（任意） 時間 速度 実行回数 開始時間;

/* 例：fadeInという名前のキーフレーム（動き）をページを読み込んでから1秒待って2秒かけてふわっとしたスピード（ease）で永遠にアニメーションし続ける */
img {
	animation:fadeIn 2s ease infinite 1s;
}

/* fadeInという名前のキーフレームをつくる（動きの設定） */
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

便利なアニメーション集

いろいろな動き

いろいろな細かな動きを選べます。マウスホバーやクリック時におすすめです。

ローディング

ページなどの読み込み中に表示されるアニメーションです。

カスタムできるアニメーション

自分で一から動きをつくることができます。

ハンバーガー

よくスマホなどで用いられるハンバーガーメニューが実装できます。

eagingを選択

動きの種類がわかりやすく、最適な種類が選べます。

https://easings.net/ja

注意点

ブラウザによってはまだまだ使用できないCSSプロパティがあります。
制作するサイトの対応ブラウザを考え、下記のサイトで確認しましょう。
https://caniuse.com/

おまけ

CSSアニメーションだけで即席脳トレ・アハ体験をつくってみました。１箇所徐々に変わっていくところがあるので見つけてみてください。

See the Pen xQXzeb by wc-tk (@wc-tk) on CodePen.

さいごに

UI改善でアニメーションを取り入れる際に考えなければならないのは、サイトの特徴に合っていることとユーザビリティの向上です。自己満足のアニメーションで使いづらかったら意味がありません。この部分をしっかりと意識して実装できるとページの遷移率、コンバージョン率などの数字も上がっていくと思います。皆さんもぜひ意味のあるアニメーションを実装してみてください。

明日の記事は@wc_tanaka_rinさんです。
よろしくお願いします。

ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。

開発エンジニアの募集

フロントエンドエンジニアの募集