個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。
海外の有名ブログでわかりやすいチュートリアルを選んで翻訳してみました(結構、意訳したり、説明を付け足しています)。
CSSアニメーションを見かける機会はどんどん増えています。
CSSアニメーションの魅力はなんといっても、プログラムが苦手な人でも手軽に動きのあるUIを実装できること。
今後のサイト制作ではぜひとも取り入れたいですよね。
今回のチュートリアルでは四角から円形に変化するアニメーションを作ってみます。

See the Pen memgBM by yugusato (@yugusato) on CodePen.

CSSアニメーション実装のご参考になれば幸いです。
なお、英語の翻訳間違いなどもあるかと思いますが、そのあたりは優しくご指摘ください。

@keyframesとanimation

CSSアニメーションでは、キーフレームを利用してアニメーションすることができます。
そのメインコンポーネントととなるのが@keyframesです。
@keyframesはアニメーションをつけたいプロパティのタイムラインを設定するもので、スタートから終点までの間に、複数設定できます。
たとえば、スタートと終点のキーフレームで円形から四角形に変化するように指定した場合、円形から四角形にかわる途中の変化をコントロールできません。
でも、スタートと終点の間にキーフレームを追加すると、途中の変形をコントロールできるようになります。
円形→三角形→四角形といった具合です。

@keyframes

実際に、@keyframesを見てみます。
@keyframesは

  • ・名前を自由に決められます(例:tutsFade)
  • ・ステージ0%〜100%の間で設定します。from(=0%)〜to(=100%)でもOK
  • ・CSSスタイルを各ステージに記述します

たとえば以下のようなコードになります。
この例では、不透明度を1から0に変化させるように設定しています。

あるいは、

ショートハンドでは、

animation

animationプロパティは、CSSセレクタに@keyframesを呼び出して利用します。
animationは複数のプロパティをもっています。

プロパティ
animation-name: @keyframesでつけた名前を記述します(先ほどは、tutsFadeと名づけました
animation-duration: 再生時間の長さを記述します。アニメーションのトータル再生時間は、スタートから終点までです
animation-timing-function: アニメーションのスピードを設定します。 linear(一定の速度で再生)、ease(最初と最後を滑らかに再生)、ease-in(最初をゆっくり再生)、ease-out(最後をゆっくり再生)、ease-in-out(最初と最後をゆっくり再生)、cubic-bezier(より細かく指定する場合に利用)
animation-delay: 再生時間を指定した時間遅らせます
animation-iteration-count: アニメーションの繰り返し再生数を指定します
animation-direction: 再生の方向を指定します(最初から再生するか、最後から再生するかなど)
animation-fill-mode: アニメーション開始前、終了後に、どのようなスタイルを適用するかを指定します(none, forwards, backwards, both)

たとえば、以下のようなコードになります。

ショートハンドでは、

ベンダープリフィックス

animationプロパティにはベンダープリフィックスをつけます。
ベンダープリフィックスを一度に付けたい場合は、「Express Prefixr」が便利です。
ショートハンドで作成したコードにベンダープリフィックスをつけると以下のようになります。

@keyframesの場合は、

複数のanimation

animationのプロパティはカンマ区切りで一度に複数設定することができます。
具体的には以下のような感じです。

四角形から円形に変形するアニメーションのチュートリアル

これまで見てきた@keyframes、animationプロパティを使って、実際に四角形から円形に変形するアニメーションを作成していきます。
@keyframesは、全部で5ステージにわかれます。
それぞれのステージで、border-radius、rotation、異なるbackground colorを定義していきます。
完成イメージは以下になります。

See the Pen memgBM by yugusato (@yugusato) on CodePen.

基本要素

最初にアニメーションさせるための要素をマークアップします。
まずはdivをマークアップ。

続けて、CSSでデフォルトのスタイルを適用していきます。

@keyframesを設定する

@keyframesを用意しましょう。
今回、四角形から円形に変化させる場合、5ステージに分けて行います。
@keyframesの名前は、square-to-circleとします。

以上のステージにスタイルを定義します。
border-radiusで四角形の角に、順番に丸みを持たせていきます。

加えて、各ステージに異なるbackground-colorを設定していきましょう。

さらに、視覚的に面白い動きをつけるため、回転する動きを、transform:rotateで設定します。

これで@keyframesの設定は完了です。
順番を追っていくとわかりやすいですよね。

animationの設定を加えます

@keyframesの設定が完了したので、続いてanimationの設定を行います。
animation-nameはsquare-to-circle
animation-durationは2s
animation-delayは1s
animation-iteration-countはinfinite(無限ループ)
animation-directionはalternate(最初は通常通りアニメーションしますが、2回目以降は終点から始まり、始点で終わります)
animationはショートハンドで記述します。

ここまでのデモは以下のようになります。

See the Pen OygMYw by yugusato (@yugusato) on CodePen.

animation-timing-functionを設定する

これでもうアニメーションできました。
でも、まだanimation-timing-functionを利用していません。
規定値を使ってもいいのですが、ここでは、より細かいanimation-timing-functionを設定できるcubic-bezierを利用して再生速度(イージング)を設定します。
ただ、cubic-bezierを利用する場合、そのまま記述するのはたいそう骨が折れます。
そこで利用するのが便利なツールです。

CSS Easing Animation Toolでcubic-bezierを設定する

その便利なツールというのが、CSS Easing Animation Toolです。

初心者のためのCSSアニメーションチュートリアル

このツールを利用すれば、簡単にcubic-bezierの値を設定できます。
グラフ上のベジェ曲線を直接触って変化させれば、微妙な再生速度(イージング)を設定できて、CSSのコードも生成されます。
もちろん、cubic-bezierだけでなく、linear(一定の速度で再生)、ease(最初と最後を滑らかに再生)、ease-in(最初をゆっくり再生)、ease-out(最後をゆっくり再生)、ease-in-out(最初と最後をゆっくり再生)もプルダウンで設定できますよ。
cubic-bezierの値を設定する場合には、グラフ部分のハンドを触って再生速度を設定します。

初心者のためのCSSアニメーションチュートリアル

以上の設定からcubic-bezier部分のコードをコピーして付け加えます。

ベンダープリフィックスをつける

最後に、ベンダープリフィックスつければ完了です。

出来上がりのデモです。

See the Pen memgBM by yugusato (@yugusato) on CodePen.

ここまではA Beginner’s Introduction to CSS Animationをもとに作成しました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)

レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ

記事を読む

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

Chromeのタブをクリックするだけで音声を消す方法

Chromeのタブをクリックするだけで音声を消す方法

Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの

記事を読む