2013.06.10
css

CSS3 アニメーションの基礎 @keyframes transform

CSS　
・ ・

CSS3のアニメーション、@keyframesとtransformプロパティで使える4つのメソッドを紹介します。

実はよく知らないでアニメーションを使っている・・・なんてことが多いかと思います。
アイディア次第でフラッシュなみのアニメーションが作れそうです。
しかもフラッシュのAction Scriptに比べるとCSS3のほうが簡単なので、この機会にぜひ覚えてみてください。

今回紹介するのは以下の4つです。

  • scale()・・・大きさ
  • translate()・・・移動
  • rotate()・・・回転
  • skew()・・・ゆがみ

CSS3 アニメーション scale()

scale( x , y )はサイズを大きくしたり小さくしたりするメソッド
x（左右）とy（上下）でサイズを数値で指定。
1が元のサイズで0.5が半分、2が2倍となります。

transform: scale(1,1);

のように記述します。

最初の数字がx、2番目の数字がyとなり、2番目の数字を省略することができます。
省略した場合はxとyが同じ比率となります。

scale()で一体どんなことができるのかは、サンプルを見てもらった方が早いと思います。

CSS3 アニメーション scale()

ではサンプルのようなアニメーションのソースを紹介します。
HTMLソース

<div id="animation-container">
</div>

CSSソース

#animation-container {
  animation: inout 3s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite;
  margin:50px auto;
  background-image: url('images/logo.png');
  background-repeat: no-repeat; 
  height: 220px; 
  width: 180px; 
}
@keyframes inout {
  0%   { transform: scale(0, 0); }
  25%   { transform: scale(2, 2); }
  50%   { transform: scale(0, 0); }
  100%  { transform: scale(1, 1); }
}
@-webkit-keyframes inout { /* Safari & Chrome */
  0%   { -webkit-transform: scale(0, 0); }
  25%  { -webkit-transform: scale(2, 2); }
  50%  { -webkit-transform: scale(0, 0); }
  100% { -webkit-transform: scale(1, 1); }
}

IE10はOKですが、IE9以下だとアニメーションは反映されません。

CSSの説明

  • 2行目

    • inoutは任意に付けたアニメーションの名前。
    3sは3秒という意味で、アニメーションの時間を現します。この場合は3秒間のアニメーション。

  • 3行目

    • animation-iteration-countはアニメーションを何回繰り返すか。1、2などの数字で指定する。今回はinfiniteで無限に繰り返し。

  • 12行目

    • @keyframes　+　アニメーションの名前で記述。
    今回はinoutというアニメーションを2行目で作ったので、@keyframes inoutとなっています。

  • 13行目～16行目

    • 設定したアニメーションの時間（今回は3秒）中の0%～100%で記述。
    0%がスタート、100%が終了です。
    また、0%をfrom、100%をtoに置き換えることもできます。

    @keyframes inout {
  from   { transform: scale(0, 0); }
  to   { transform: scale(2, 2); }
}
  • 18行目~

    • Chrome、Safariでは-webkit-transformを使わないとダメなようです。

リファレンス: CSS3 @keyframes Rule

CSS3　アニメーション　translate()

translate(x, y)は上下、左右に動くようにするメソッド

x（左右）とy（上下）で移動する距離をピクセルで指定。

transform: translate(100px, 300px);だったら、右に100px移動、下に300px移動。

マイナスの値だと、それぞれ逆に移動するので、
transform: translate(-100px, -300px);だったら、左に100px移動、上に300px移動。

こちらもサンプルを見た方が分かりやすいと思います。

CSS3　アニメーション　translate()

HTMLソース

<div id="animation-container">
</div>

HTMLは先ほどと同じです。

CSSソース

#animation-container { 
  animation: translate 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: translate 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  background-image: url('images/logo.png'); 
  background-repeat: no-repeat; 
  height: 220px; 
  width: 180px; 
  margin:50px auto;
}  
@keyframes translate { 
  0%   { transform:  translate(0px, 0px);    } 
  25%   { transform:  translate(300px, 0px);   }
  75%   { transform:  translate(-300px, 0px);   }
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes translate { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  25%   { -webkit-transform:  translate(300px, 0px);   }
  75%   { -webkit-transform:  translate(-300px, 0px);   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
}

CSSの説明

  • 2行目

    • translateは任意に付けたアニメーションの名前。3sは3秒で、アニメーションが3秒間という意味です。

  • 3行目

    • animation-iteration-countはアニメーションを繰り返す回数。今回は1なので1回のみアニメーションが実行されます。
    infiniteにすると無制限で繰り返し。

  • 12行目

    • @keyframes　+　アニメーションの名前で記述。
    transformというアニメーションを作ったので、@keyframes transformとなっています。

  • 13行目～

    • (0px, 0px)が開始位置でそこを基準に考えます。座標のように考えると良いでしょう。

CSS3　アニメーション　rotate()

rotate()は要素を回転させるメソッド。
rotate(180deg)のように回転させる角度を記述します。
通常は時計回りに回転ですが、マイナスの値で記述すると反時計回りになります。

CSS3　アニメーション　rotate()

HTMLソース

<div id="animation-container">
　　<div class="inner-circle">
　　</div> 
</div>

今度はinner-circleという別の要素を中に入れてみます。
理由は後述します。

CSSソース

#animation-container {  
  width: 600px; 
  animation: rotate 2s; 
  animation-iteration-count: 2; 
  -webkit-animation: rotate 2s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 2;
  margin:50px auto;
}
@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}
@-webkit-keyframes rotate { /*Safari & Chrome */ 
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } 
} 
.inner-circle { 
  background-image: url('images/logo.png'); 
  background-repeat: no-repeat; 
  height: 220px; 
  width: 180px; 
}

CSSの説明

  • 2行目と19行目

    • animation-containerのwidthが600px、inner-circleのwidthが180pxとなっています。
    アニメーションの基準がanimation-containerなので、ロゴ自体が移動しながら回転しているように見えます。

    下記のように、inner-circleをanimation-containerに統合し、widthを180pxとするとロゴ自体がその場で回転していうようになります。

    #animation-container {  
  animation: rotate 2s; 
  animation-iteration-count: 2; 
  -webkit-animation: rotate 2s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 2;
  margin:50px auto;
  background-image: url('images/logo.png'); 
  background-repeat: no-repeat; 
  height: 220px; 
  width: 180px; 
}
@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}
@-webkit-keyframes rotate { /*Safari & Chrome */ 
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } 
}

    CSS3　アニメーション　rotate() 2

  • 3行目

    • rotateは任意につけたアニメーション名。2sはアニメーションは2秒間という意味。

  • 9行目

    • @keyframes　+　アニメーションの名前で記述。
    rotateというアニメーションを3行目で作ったので、@keyframes rotateとなっています。

CSS3　アニメーション　skew()

skew(x,y)は斜めにゆがませるメソッド。
x（左右）とy（上下）に指定した角度で傾斜します。

CSS3　アニメーション　skew()

HTMLソース

<div id="animation-container"> 
</div>

CSSソース

#animation-container {   
  animation: skew 2s; 
  animation-iteration-count: 2; 
  -webkit-animation: skew 2s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 2;
  margin:50px auto;
  background-image: url('images/logo.png');
  background-repeat: no-repeat; 
  height: 220px; 
  width: 180px; 
}
@keyframes skew { 
  0%  { transform: skew(0deg,0deg) ; } 
  25% { transform: skew(20deg, 20deg);  } 
  75% { transform: skew(-20deg, -20deg);  } 
  100% { transform: skew(0deg,0deg)        } 
} 
@-webkit-keyframes skew { 
  0%  { -webkit-transform: skew(0deg,0deg) ; } 
  25% { -webkit-transform: skew(20deg, 20deg);  } 
  75% { -webkit-transform: skew(-20deg, -20deg);  } 
  100% { -webkit-transform: skew(0deg,0deg); } 
}

CSSの説明

  • 2行目

    • skewは任意に付けたアニメーションの名前。2sはアニメーションが2秒間という意味。

  • 12行目

    • @keyframes　+　アニメーションの名前で記述。
    skewというアニメーションを作ったので、@keyframes skewとなっています。

参考にしたサイト:　4 Simple CSS3 Animation Tutorials
CSS　
・ ・
関連する記事

コメント & トラックバック
  1. 保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
    2014.12.19　 10:57 AM

    […] ▼記事リンク CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow | No:1339 […]

    返信

  2. CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow : ちゅどん道中記
    2013.06.12　 10:31 AM

    […] ＞＞CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow Author: […]

    返信

コメントに返信する コメントをキャンセル

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


人気の記事
  1. CMYKで印刷すると特色のゴールドのような色になる配色
  2. シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
  3. 革パターン
    【PSD,AI,JPG】 無料で使える革・レザー調の素材全部で250種類以上
  4. DTP 文字の大きさと配置の目安
  5. CSS3 アニメーションの基礎 @keyframes transform
最新の記事
人気記事プラグインなし
【WordPress】プラグインなしで人気の記事をランキングで載せる方法
カスタム投稿タイプ デフォルト値
カスタム投稿タイプを作るときに参考になるデフォルト値
ロゴデザインをするときに大切な7つのポイント
ロゴデザインの参考にしたい素敵なロゴ100選
jQueryで特定のCSSの表示を遅くする方法
カテゴリー
タグ
CSS3 FB IE MT PHP WPテクニック WPテーマ作成 WPプラグイン アニメーション ウェブデザイン サムネイル サンプルあり スライドショー フォント フォーム フリー素材 プラグイン マウスオーバー メニュー リスト表示 レイアウト ロゴ 印刷・DTP 参考サイト 画像 色・配色
おすすめの本
ネットで調べればなんとかなる！という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
役立つリンク 相互リンク
TO TOP