LoginSignup
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-10

この記事はウェブクルー 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さんです。
よろしくお願いします。

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

開発エンジニアの募集

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8