カテゴリー

キーワード

 
> 【CSS3】CSSのanimationで画...

【CSS3】CSSのanimationで画面に動きを出そう①【概要説明】


2015 年 6 月 9 日 投稿    view: 8429
タグ:
このエントリーをはてなブックマークに追加

css animation 概要

こんにちは、WEBマーケティング部の杉尾です。


前回までで、transitionプロパティを紹介しました。


前々回
⇒ 【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します
前回
⇒ 【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編
 


今回はCSSで画面上に動きを作れるanimationプロパティを紹介します。



animationとは

CSS3のアニメーションは、CSS のスタイルを別のスタイルへ変化させることができます。


今回紹介するanimationプロパティの他に、transitiontransformがあります。


3つの違いは、

transition ⇒ 滑らかに変化させる(移動時間を調整)、ループなし
animation ⇒ ページ表示後に即可動、ループあり
transform ⇒ 変形(移動・拡大・回転・傾斜・遠近)が可能、ループなし

です。


対応ブラウザ

いつものように、Caniuse.comを見に行きます。


css3 animationプロパティ 対応ブラウザ


Safari、Opera、iOS Safari、Android Browser用にベンダープレフィックスの『-Webkit-』をつけてください。


また、IE9以下では使えません。


ちなみに2015年3~5月のブラウザシェアはIE9が4.70%、IE8が2.64%になっています。


国内ブラウザシェア
http://gs.statcounter.com/#browser_version-JP-monthly-201503-201505-bar


完全に切り捨てるには少し早いかな、という感じです。


プログレッシブエンハンスメントの考え方をとり、animationで要素が動かないIE9以下で見ても情報を取得するのに問題がないようにしましょう。


animationの3つの利点

1. CSSで指定するだけなので実装が簡単。


2. 簡単なアニメーションの場合、同じく画面に動きを作れるJavaScriptより負荷が低くなることが多い。


3. ブラウザがアニメーションを制御し、アクティブでないタブでは更新頻度を減らすなどパフォーマンスを最適化してくれる。


サンプル紹介

では、まず具体例を挙げます。


sampleというdivが文字色と背景色を変えながら大きさを変更します。


HTML

<div class="frame">
    <div class="sample">サンプル</div>
</div>

CSS

div.frame {
    width:300px;
    height:200px;
    border:1px solid red;
}
div.sample {
    -webkit-animation-name: sample_anime;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-name: sample_anime;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes sample_anime {
    from {
        width: 100px;
        height: 50px;
        background:#ffffff;
    }
    to {
        width: 200px;
        height: 100px;
        background:#000000;
        color:#ffffff;
    }
}
@keyframes sample_anime {
    from {
        width: 100px;
        height: 50px;
        background:#ffffff;
    }
    to {
        width: 200px;
        height: 100px;
        background:#000000;
        color:#ffffff;
    }
}

【サンプル】

サンプル

解説
frameというclassをつけたdivは外枠(赤線で示した部分です)を表しています。
その中でsampleというclass名のdivがアニメーションで動きます。


CSSの7行目と10行目、animation-nameでアニメーション名を指定し、その動きを@keyframesルールで定義します。
CSSの8行目と11行目、animation-durationでアニメーションの1サイクルにかかる秒数またはミリ秒数を指定します。
CSSの9行目と12行目、animation-iteration-countでアニメーションを再生する回数を指定します。
初期値は0です。infiniteで無限に繰り返すという指定になります。


CSSの14行目~、@keyframesでアニメーションがどの地点で変化するかを示します。詳しくは次項をご覧ください。


@keyframesルール

CSS3 でアニメーションを作成するには@keyframesを理解しなくてはなりません。


@keyframesは、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を指定します。


このことにより、CSS animationの流れの各地点を指定することができるようになります。


必ず指定しないといけないのは、最初と最後です。


0% (または from) と100% (または to) で指定します。


どちらか片方でも存在しない場合、アニメーションは動きません。


前項のサンプルでは、fromとtoで指定しました。
これは0%から100%の状態を示しています。


パーセンテージで書く場合は以下のサンプルコードのようになります。
50%の状態も指定しています。


CSS

@keyframes sample_anime {
    0% {
        width: 100px;
        height: 50px;
        background:#ffffff;
    }
    50% {
        width: 250px;
        height: 150px;
        background:#0000ff;
    }
    100% {
        width: 200px;
        height: 100px;
        background:#000000;
        color:#ffffff;
    }
}

animationプロパティのサブプロパティ

animationプロパティのサブプロパティは以下の通りです。
詳しくは次回説明します。


animation-delay

要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。
初期値は0で、その場合はすぐに実行されます。


また、負の値(マイナス)も指定できます。
その場合は、指定した分の時間を遡ってアニメーションを実行したように見せかけます。


マイナスを指定したら読み込んだ瞬間、アニメーションを途中から実行したように見えるということです。


CSS

.foo {
    -webkit-animation-delay:3s;
    animation-delay:3s;
}

animation-direction

アニメーション終了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。


値は初期値であるnormalと、逆方向に再生するalternateがあります。


alternateを指定した場合、奇数回では通常の再生、偶数回では逆方向に再生します。


CSS

.foo {
    -webkit-animation-direction:alternate;
    animation-direction:alternate;
}

animation-duration

1回のアニメーションサイクルに要する時間の長さを設定します。


CSS

.foo {
    -webkit-animation-duration:5s;
    animation-duration:5s;
}

animation-iteration-count

アニメーションを繰り返す回数を設定します。アニメーションを無限に繰り返すには infinite を指定してください。


CSS

.foo {
    -webkit-animation-iteration-count:3;
    animation-iteration-count:3;
}

animation-name

アニメーションのキーフレームを示す @keyframes @ 規則の名前を指定します。


CSS

.foo {
    -webkit-animation-name:sample_anime1;
    animation-name:sample_anime1;
}

animation-play-state

アニメーションを一時停止したり、再開したりすることができます。
初期値はrunningでアニメーションを再生中にします。
値にpausedを指定すると、アニメーションは一時停止します。


CSS

.foo {
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

animation-timing-function

アニメーションの進め方を設定します。これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
値は、ease、linear、ease-in、ease-out、ease-in-outとcubic-bezier(数値, 数値, 数値, 数値)です。
それぞれの詳しい説明は次回行います。


CSS

.foo {
    -webkit-animation-timing-function:ease;
    animation-timing-function:ease;
}

animation-fill-mode

アニメーションを実行する前後に、指定したスタイルを適用するかを設定します。
値は、none、forwards、backwards、bothです。


CSS

.foo {
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

まとめ

今回は、CSSで画面に動きを出せるanimationの概要を紹介しました。


これを応用すれば、画面に色々な動きを出すことが可能になります。


次回、各サブプロパティを詳しく紹介しますので、そちらと併せてご覧ください。


最後までお読みいただき、ありがとうございました。



書きました

⇒ 【CSS3】CSSのanimationで画面に動きを出そう②【概要説明】

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事