カテゴリー

キーワード

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

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


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

CSS animation 概要続き

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


前回、CSS3のanimationプロパティの概要を紹介しました。


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


今回は各サブプロパティの説明をするつもりだったんですが、よくよく前回をく見直してみると大体の説明は終わっていました。


ですので、今回はanimationのショートハンドとanimation-timing-functionプロパティ、animation-fill-modeプロパティの詳細説明をしたいと思います。



animationプロパティ


注意点

1. IE9以下では動きません。
2. Safari、Opera、iOS Safari、Android Browser用にベンダープレフィックスの『-webkit-』をつけてください。


ここでは繰り返し説明しませんので、詳しくは前回を参照してください。


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


3つのプロパティ


animationプロパティ

前回、ショートハンドを紹介し忘れていました。


これは各サブプロパティをひとまとめにして、一括指定できるものです。


サンプルソースをどうぞ。


まずはショートハンドを使わず、個別に指定した場合。


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: test_anime;
    -webkit-animation-duration: 6s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    animation-name: test_anime;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-delay: -3s;
}
@-webkit-keyframes test_anime {
    0% {width: 50px; height: 50px; background-color: #cccccc;}
    100% {width: 200px; height: 100px; background-color: #000000;}
}
@keyframes test_anime {
    0% {width: 50px; height: 50px; background-color: #cccccc;}
    100% {width: 200px; height: 100px; background-color: #000000;}
}

上記をショートハンドで記述すると以下のようになります。
上の7~16行目を2行で書くことができます。


CSS

div.frame {
    width:300px;
    height:200px;
    border:1px solid red;
}
div.sample {
    -webkit-animation: test_anime ease 6s 1s infinite;
    animation: test_anime ease 6s -3s infinite;
}
@-webkit-keyframes test_anime {
    0% {width: 50px; height: 50px; background-color: #cccccc;}
    100% {width: 200px; height: 100px; background-color: #000000;}
}
@keyframes test_anime {
    0% {width: 50px; height: 50px; background-color: #cccccc;}
    100% {width: 200px; height: 100px; background-color: #000000;}
}

7、8行目にショートハンドで記述しました。
それぞれのプロパティを半角で区切って書いてください。


順番は『animation-duration』と『animation-delay』だけ決まっています。
durationを必ず先に書いてください。
それ以外の順番は自由です。


animation-timing-function

アニメーションの進め方を設定します。これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
値は、easelinearease-inease-outease-in-outcubic-bezier(数値, 数値, 数値, 数値)です。


それぞれサンプルを紹介していますが、HTML、CSSの記述はそれぞれ前項(animation、ショートハンド)と同じものを使っています。
ショートハンドで指定したCSSの『ease』の部分のみ、それぞれの値に変更しています。


///////////// ease /////////////
最初と最後がゆっくり滑らかに変化します。


サンプル

サンプル

///////////// linear /////////////
一定の速度で変化します。


サンプル

サンプル

///////////// ease-in /////////////
ゆっくり始まり、徐々に速くなります。


サンプル

サンプル

///////////// ease-out /////////////
速く始まり、徐々に遅くなります。


サンプル

サンプル

///////////// ease-in-out /////////////
動きはeaseと同じく、最初と最後がゆっくり滑らかに変化します。
違いは速度です。ease-in-outの方がよりゆっくり始まりゆっくり終わります。


サンプル

サンプル

///////////// cubic-bezier(数字, 数字, 数字, 数字) /////////////
transition-timing-functionプロパティでは、変化の進行割合を3次ベジェ曲線で指定します。


3次ベジェ曲線の図


cubic-bezier関数で指定できる値は0~1の範囲内です。
3次ベジェ曲線のP1とP2を(x1,y1,x2,y2)で指定します。


サンプルコード

div.sample6 {
   -webkit-animation: test_anime cubic-bezier(0.9,0.1,0.9,1.0) 6s 1s infinite;
   animation: test_anime cubic-bezier(0.9,0.1,0.9,1.0) 6s 1s infinite;
}

この指定ですと、最初はかなりゆっくりで後から急に速くなります。


サンプル

サンプル

animation-fill-mode

アニメーションを実行する前後に、指定したスタイルを適用するかを設定します。
わかりやすく言うと、『アニメーションが再生中でない場合の扱い』です。
値は、none、forwards、backwards、bothです。


まずはサンプルコードをご覧ください。


HTML

<div class="none">anime-fill-mode none</div>
<br>
<div class="forwards">anime-fill-mode forwards</div> 
<br>
<div class="backwards">anime-fill-mode backwards</div>  <br> <div class="both">anime-fill-mode both</div> 

CSS

div.anime-fill-mode {
    width:200px;
    height:100px;
    background-color:#999999;
}
div.none {
    -webkit-animation: gradation 6s 2s;
    -webkit-animation-fill-mode: none;
    animation: gradation 6s 2s;
    animation-fill-mode: none;
}
div.forwards {
    -webkit-animation: gradation 6s 2s;
    -webkit-animation-fill-mode: forwards;
    animation: gradation 6s 2s;
    animation-fill-mode: forwards;
}
div.backwards {
    -webkit-animation: gradation 6s 2s;
    -webkit-animation-fill-mode: backwards;
    animation: gradation 6s 2s;
    animation-fill-mode: backwards;
}
div.both {
    -webkit-animation: gradation 6s 2s;
    -webkit-animation-fill-mode: both;
    animation: gradation 6s 2s;
    animation-fill-mode: both;
}
@-webkit-keyframes gradation {
    0% { background-color: #ffffff;}
    100% { background-color: #ff0000;width:300px;}
}
@keyframes gradation {
    0% { background-color: #ffffff;}
    100% { background-color: #ff0000;width:300px;}
}

サンプル


デモ画面へ


解説
noneforwardsbackwardsbothというクラス名のついた4つのdivを縦に並べて比較します。


違いは『animation-fill-mode』の値です。
animation-fill-mode プロパティは、アニメーションが再生中でない場合の扱いです。


つまり、
アニメーション再生の終了後
animation-delay プロパティで指定された再生開始までの待ち時間中


のときに


再生開始直後の状態にするか
再生終了直前の状態にする


のどちらの状態にするか指定できます。


値は、

none ⇒ 初期値。再生中以外、つまり、止まった状態では@keyframesで指定されたプロパティは無効。
forwards ⇒ アニメーションが動いていない場合は、@keyframesで指定された最後の値(通常『100%』または『to』に指定されているもの)を適用。
backwards ⇒ @keyframesで指定された最初の値(『0%』または『from』)を即座に適用。またanimation-delayプロパティで指定した待ち時間の間もその状態を維持する。
both ⇒ 再生開始前は開始直後の状態、再生終了後は終了直前の状態になる。

です。


まとめ

animation(ショートハンド)、animation-timing-function、animation-fill-modeの詳細を紹介しました。


使いようによっては複雑なアニメーションも作れますので、色々試してみてください。


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



前回はコチラです。


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

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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