メニュー

【保存版】CSSアニメーションの種類・使い方・サンプル

こんにちは。
Webデザイナーの山本です。
今回はCSSアニメーションの種類や詳細、使い方の例などをご紹介します!

CSSアニメーションとは?

CSSアニメーションとは、CSSだけでアニメーションすることができる機能のことです。
animationとtransitionの2種類があります。
animationは再生回数を指定したり逆再生や遅延して再生など詳細な指定が可能ですが、transitionはhover(マウスオーバー)などのタイミングで1度だけの再生になります。
主な違いはこんな感じ。

▼animation
・ループできる
・本格的なアニメーションの設定ができる
・再生後にプロパティの継続ができる
・自動再生ができる

▼transition
・ループできない
・hover等のきっかけが必要(自動再生できない)
・再生後にプロパティが元に戻る

animation


animationは@keyframesを使って設定していきます。

テンプレート

まとめて書いた場合は以下のような感じになります。
nameやプロパティは任意で変更してください。
ベンダープレフィックス(-webkit-、-moz-)も追加しましょう。

★★★ 1つずつ書いた場合 ★★★
.con{
    animation-name: name;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:alternate;
}
★★★ まとめて書いた場合 ★★★
.con{
    animation: name 1s 0.5s ease-in-out infinite alternate;
}

★★★ 複数をまとめて書いた場合 ★★★
.con{
    animation: name 1s 0.5s ease-in-out infinite alternate , name2 1s 1.5s ease-in-out infinite;
}

@keyframes name{
    0%{
    }
    100%{
    }
}

種類

animationの種類は以下になります。

animation-name : キーフレームの名前
animation-duration : かかる時間
animation-timing-function : 速度
animation-delay : 何秒後に開始するか
animation-iteration-count : 回数・ループ指定
animation-direction : 再生する方向
animation-fill-mode : アニメーション前後のプロパティの状態
animation-play-state : 一時停止・再生の指定
@keyframes : アニメーションの変化の指定

各詳細

animation-name(キーフレームの名前)

どの@keyframesを使用するか指定するためのプロパティ。

animation-duration(かかる時間)

何秒間アニメーションさせるかを指定するためのプロパティ。

・0s:(初期値)
・1sや100msなど

animation-timing-function(速度)

アニメーションの速度を指定するためのプロパティ。

・ease:ゆっくり始まって、ゆっくり終わる(初期値)
・ease-in:ゆっくり始まる
・ease-out:ゆっくり終わる
・ease-in-out:easeよりさらにゆっくり始まって、ゆっくり終わる
・linear:一定の速度で始まって終わる
・step-start:最初からアニメーション終了時の状態になる
・step-end:最後に一瞬でアニメーション終了時の状態になる
・steps(n , flag):nの回数だけコマ送りする。flagを「start」にすると開始直後に1段階目の変化が発生。「end」にすると、最初のインターバル経過後に1段階目の変化が発生。デフォルトはendで、記載せずに省略することも可能。
・cubic-bezier(x1, y1, x2, y2):[0.0 , 0.0] から始まり、[x1 , y1], [x2 , y2] を経由して最終的に[1.0 , 1.0]に変化。X軸は時間経過率、Y軸は変化率を表す。xは0.0 ~ 1.0まで、yは基本自由で負の値も使用可

stepsについて書くと長くなってしまうのでまた別の機会にと思うのですが、簡単にいうとコマ撮りのアニメーションみたいなことができるようになります。

試しにチャカくん(弊社peakvoxレーベルのオリジナルキャラクター)をstepsで動かしてみると以下のようになります。

▼元の画像

コマを増やせばその分なめらかな動きになります。

animation-delay(何秒後に開始するか)

アニメーションを何秒後に開始するかを指定するためのプロパティ。

・0s:(初期値)
・1sや100msなど

animation-iteration-count(回数・ループ指定)

アニメーションを何回再生するかを指定するためのプロパティ。

・1:(初期値)
・1.5:小数点も可
・infinite:無限ループ

animation-direction(再生する方向)

アニメーションを再生する方向を指定するためのプロパティ。
2回以上再生する場合のみ適用されます。

・normal:通常方向を実行する(初期値)
・alternate:通常方向と、逆方向を繰り返す
・reverse:毎回逆方向を実行する
・alternate-reverse:通常方向と、逆方向を繰り返す(逆再生から始まる)

animation-fill-mode(実行前・実行後の状態)

アニメーションの再生前後のスタイルを指定するためのプロパティ。

・none:(初期値)
・forwards:再生後も、@keyframes(100%)のスタイルが適用されたままになる
・backwards:再生前は、@keyframes(0%)のスタイルが適用される。(animation-delayを使用している場合も含む)
・both:再生前は@keyframes(0%)が、再生後は@keyframes(100%)のスタイルが適用される

animation-play-state(一時停止・再生の指定)

アニメーションを再生中か、一時停止かを指定するためのプロパティ。
一時停止された場合、停止した時点の状態で止まります。
再開されたときは、最初からではなく続きから再生されます。

・running:再生(初期値)
・paused:一時停止

@keyframes(アニメーションの変化の指定)

書き方が何種類かあります。
記載するときはベンダープレフィックス(@-webkit-keyframes、@-moz-keyframes)も追加しましょう。

★★★ 通常の書き方 ★★★
@keyframes name{
    0%{
    }
    100%{
    }
}
★★★ 最後だけ指定しても動く ★★★
@keyframes name{
    100%{
    }
}
★★★ 最初と最後だけ指定 ★★★
@keyframes name{
    from{
    }
    to{
    }
}
★★★ 細かく指定 ★★★
@keyframes name{
    0%{
    }
    25%{
    }    
    50%{
    }
    75%{
    }    
    100%{
    }
}

サンプル

数種類のサンプルを用意してみました。
もし使用される場合は適当に数値や名前を変更してください。

See the Pen
abzprvo
by otwo (@otwo)
on CodePen.


※1回のみ再生しているものは、サンプルの右下にある「Rerun」ボタンでご確認いただけます。

transition


ボタンのホバーなどに使用する場合は、transitionのほうが手軽でおすすめです。

テンプレート

animation同様ベンダープレフィックス(-webkit-、-moz-)も追加しましょう。

★★★ 1行ずつ書いた場合 ★★★
.con{
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

★★★ まとめて書いた場合 ★★★
.con{
    transition: width 2s linear 0s;
}

★★★ 複数をまとめて書いた場合 ★★★
.con{
    transition: width,background-color 3s,2s ease,linear 0s,0s;
}

種類

transitionの種類は以下になります。

transition-property : 対象のプロパティ
transition-duration : かかる時間
transition-timing-function : 速度
transition-delay : 何秒後に開始するか

各詳細

transition-property(対象のプロパティ)

trainsitionの対象となるCSSのプロパティ

・all:全プロパティ(初期値)
・none:どのプロパティも変化しない
・各プロパティ

指定できるプロパティの一覧
※抜けがあればごめんなさい。ここに記載が無くても基本的にCSSスタイルはほぼ指定できるかと思います。

・width
・height
・background-color
・background-position
・border-bottom-color
・border-bottom-width
・border-left-color
・border-left-width
・border-right-color
・border-right-width
・border-spacing
・border-top-color
・border-top-width
・box-shadow
・clip
・color
・font-size
・font-weight
・top
・bottom
・left
・right
・letter-spacing
・line-height
・margin-top
・margin-bottom
・margin-left
・margin-right
・text-indent
・text-shadow
・vertical-align
・visibility
・word-spacing
・z-index

一括指定(ショートハンド)することもできます。

transition-duration(かかる時間)

何秒間でアニメーションさせるかを指定するためのプロパティ。

・0s:(初期値)
・1sや100msなど

transition-timing-function(速度)

アニメーションの速度を指定するためのプロパティ。

・ease:ゆっくり始まって、ゆっくり終わる(初期値)
・ease-in:ゆっくり始まる
・ease-out:ゆっくり終わる
・ease-in-out:easeよりさらにゆっくり始まって、ゆっくり終わる
・linear:一定の速度で始まって終わる
・steps(n):nの回数だけコマ送りする

こちらのstepsもanimationのsteps同様、コマ撮りのアニメーションのように動きます。

transition-delay(何秒後に開始するか)

アニメーションのを何秒後に開始するかを指定するためのプロパティ。

・0s:(初期値)
・1sや100msなど

サンプル

数種類のサンプルを用意してみたのでホバーしてみてください。
もし使用される場合は適当に数値や名前を変更してください。

See the Pen
vYEgoYw
by otwo (@otwo)
on CodePen.

感想

以上になります。

今回は保存版みたいな形で作成してみましたがお役に立ちそうでしょうか。
自分自身も書いててかなり勉強になりました。

また、今回のサンプルはほぼpx指定でアニメーションさせているのでまだよいのですが、レスポンシブのこととかを考えるともう少し記載が面倒にはなります。
ただ覚えて使いこなせるようになれば、かなり重宝できるのではないでしょうか!

ぜひ試してみてください!

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら