CSS3 アニメーションの基礎 @keyframes transform
CSS3 ・ アニメーション ・ サンプルあり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()で一体どんなことができるのかは、サンプルを見てもらった方が早いと思います。

ではサンプルのようなアニメーションのソースを紹介します。
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行目
- 3行目
- 12行目
- 13行目~16行目
inoutは任意に付けたアニメーションの名前。
3sは3秒という意味で、アニメーションの時間を現します。この場合は3秒間のアニメーション。
animation-iteration-countはアニメーションを何回繰り返すか。1、2などの数字で指定する。今回はinfiniteで無限に繰り返し。
@keyframes + アニメーションの名前で記述。
今回はinoutというアニメーションを2行目で作ったので、@keyframes inoutとなっています。
設定したアニメーションの時間(今回は3秒)中の0%~100%で記述。
0%がスタート、100%が終了です。
また、0%をfrom、100%をtoに置き換えることもできます。
@keyframes inout { from { transform: scale(0, 0); } to { transform: scale(2, 2); } }
Chrome、Safariでは-webkit-transformを使わないとダメなようです。
CSS3 アニメーション translate()
translate(x, y)は上下、左右に動くようにするメソッド
x(左右)とy(上下)で移動する距離をピクセルで指定。
transform: translate(100px, 300px);だったら、右に100px移動、下に300px移動。
マイナスの値だと、それぞれ逆に移動するので、
transform: translate(-100px, -300px);だったら、左に100px移動、上に300px移動。

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行目
- 3行目
- 12行目
- 13行目~
translateは任意に付けたアニメーションの名前。3sは3秒で、アニメーションが3秒間という意味です。
animation-iteration-countはアニメーションを繰り返す回数。今回は1なので1回のみアニメーションが実行されます。
infiniteにすると無制限で繰り返し。
@keyframes + アニメーションの名前で記述。
transformというアニメーションを作ったので、@keyframes transformとなっています。
(0px, 0px)が開始位置でそこを基準に考えます。座標のように考えると良いでしょう。
CSS3 アニメーション rotate()
rotate()は要素を回転させるメソッド。
rotate(180deg)のように回転させる角度を記述します。
通常は時計回りに回転ですが、マイナスの値で記述すると反時計回りになります。

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); } }

rotateは任意につけたアニメーション名。2sはアニメーションは2秒間という意味。
@keyframes + アニメーションの名前で記述。
rotateというアニメーションを3行目で作ったので、@keyframes rotateとなっています。
CSS3 アニメーション skew()
skew(x,y)は斜めにゆがませるメソッド。
x(左右)とy(上下)に指定した角度で傾斜します。

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行目
- 12行目
skewは任意に付けたアニメーションの名前。2sはアニメーションが2秒間という意味。
@keyframes + アニメーションの名前で記述。
skewというアニメーションを作ったので、@keyframes skewとなっています。
2014.12.19 10:57 AM
[…] ▼記事リンク CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow | No:1339 […]
2013.06.12 10:31 AM
[…] >>CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow Author: […]