この記事はウェブクルー 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を選択
動きの種類がわかりやすく、最適な種類が選べます。
注意点
ブラウザによってはまだまだ使用できないCSSプロパティがあります。
制作するサイトの対応ブラウザを考え、下記のサイトで確認しましょう。
https://caniuse.com/
おまけ
CSSアニメーションだけで即席脳トレ・アハ体験をつくってみました。１箇所徐々に変わっていくところがあるので見つけてみてください。
See the Pen xQXzeb by wc-tk (@wc-tk) on CodePen.
さいごに
UI改善でアニメーションを取り入れる際に考えなければならないのは、サイトの特徴に合っていることとユーザビリティの向上です。自己満足のアニメーションで使いづらかったら意味がありません。この部分をしっかりと意識して実装できるとページの遷移率、コンバージョン率などの数字も上がっていくと思います。皆さんもぜひ意味のあるアニメーションを実装してみてください。
明日の記事は@wc_tanaka_rinさんです。
よろしくお願いします。
ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。