個人的に役立ったデザイン素材や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
  • 7

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

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

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)

以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という

記事を読む

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む