CSS
CSS3
アニメーション

CSSアニメーションで動きのあるサイトに

この記事はウェブクルー 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アニメーションだけで即席脳トレ・アハ体験をつくってみました。1箇所徐々に変わっていくところがあるので見つけてみてください。

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


さいごに

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

明日の記事は@wc_tanaka_rinさんです。

よろしくお願いします。

ウェブクルーでは一緒に働いていただける方を随時募集しております。

お気軽にエントリーくださいませ。

開発エンジニアの募集

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