2013.06.10
css

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

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
関連する記事

コメント & トラックバック
  1. […] ▼記事リンク CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow | No:1339 […]


  2. […] >>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>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP