iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法
    このエントリをはてなブックマークに登録

先日「iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法」という記事を書きましたが、今回はその続きです。

前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。

また前回は「-webkit-animation-name」を使う方法でしたが、今回はやり方を変えてみました。

 
静止画なのでわかりづらいですが、左からクルクルと回転しながら縮小して、右のようになります。

 

サンプルコードは次の通りです。

<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" />
<script type="text/javascript">
function animationStart() {
	var el = document.getElementById("target");
	el.style.webkitTransition = '-webkit-transform 3s ease-in-out';
	el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)';
}
</script>
</head>
<body>
<input type="button" name="hoge" value="animation" onClick="animationStart();" />
<div id="target" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:10px;"></div>
</body>
</html>

ポイントは、7~8行目のJavaScriptです。

el.style.webkitTransition = '-webkit-transform 3s ease-in-out';

ここでアニメーションの定義を行っています。
「3s」というのがアニメーションさせる時間で、この例では「3秒」です。
「ease-in-out」というのがアニメーションの動きの強弱で、この例では「最初と最後をゆっくり」ということです。

こちらは「default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)」のいずれかの値をとることができるようです。

詳しくはこちらのページに書かれています。(英語です)
→ Surfin’ Safari – Blog Archive » CSS Animation [webkit.org]

 

el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)';

続いてこの部分で、移動・拡大縮小、回転の数値を設定しています。

「translate(180px,40px)」の部分で、移動する位置を指定しています。
この例では右に180ピクセル、下に40ピクセルです。(左や上に移動する場合はマイナスの値を指定します)

「rotate(180deg)」は回転です。
この例では、半時計周りに180度回転させています。

「scale(0.1)」は拡大・縮小です。
ここでは0.1倍と1/10の大きさにしています。

この他にも、skew(変形)や、matrix(変換行列)なども使えるようです。

 

iPhoneをお持ちの方はこちらのページからご確認ください。
→ 縮小・回転のサンプルページ

 

またこの辺りの話は、こちらのページがサンプルが豊富でとても参考になります。

→ iPhone向けサイトを考える : リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション [livedoor.jp]

 

関連:


 

最近の記事







コメントを書く