一部のAndroidでは、CSS3アニメーションrotateの方向指定が利かない

公開日： 2012/11/14

渡辺

技術情報

こんにちは。x-fitチーム・エバンジェリストの渡辺です。Webサイトで使用するアニメーションをCSS3で書くことも増えてきていると思いますが、要素を回転させるアニメーションrotateにおいて、一部のAndroidでは回転方向の指定が利かない現象が確認されましたのでまとめてみます。

CSS3で要素を回転させるアニメーション

CSS3で、要素のアニメーション機能としてtransformプロパティが追加されています。現在はワーキングドラフト版となっているため、使用する場合は、ベンダープレフィックスをつける必要があります。要素を回転させる場合は、このプロパティに、rotateX()、rotateY()、rotateZ()を指定することで、それぞれの方向に回転させることができます。x,y,zそれぞれの方向は、以下のようになっています。

xは、画面に対して横に軸があり、それを中心に縦回転するように動きます。yは画面に対して縦に軸があり、それを中心に横回転するように動きます。zは画面に対して前後に軸があり、それを中心に時計回りに要素が回転します。

サンプルコード

以下のようなコードで試してみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>rotate animation sample</title>
<style type="text/css">
body{
  margin : 0;
  padding : 0;
}

#container{
  width :250px;
  margin : 0 auto;
}

#x, #y, #z{
  margin : 20px;
  width: 200px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

//アニメーション指定部。WindowsPhoneのときはベンダープレフィクスを-msに変更して確認しています。
@-webkit-keyframes Xturn{
0%{-webkit-transform: rotateX(0deg);}
100%{-webkit-transform: rotateX(75deg);}
}
@-webkit-keyframes Yturn{
0%{-webkit-transform: rotateY(0deg);}
100%{-webkit-transform: rotateY(75deg);}
}
@-webkit-keyframes Zturn{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(75deg);}
}
#blank{
height: 3000px;

}
</style>
</head>
<body>
<div id="container">
<div id="x">rotate X</div>
<div id="y">rotate Y</div>
<div id="z">rotate Z</div>
<div id="blank"></div>
</div>
<script type="text/javascript">
 $('#x').bind("touchend", function(){turnX();});
 $('#y').bind("touchend", function(){turnY();});
 $('#z').bind("touchend", function(){turnZ();});
 
 //CSS指定部。WindowsPhoneのときはベンダープレフィクスを-msに変更して確認しています。
 function turnX(){
   $('#x').css("-webkit-animation-name", "Xturn");
   $('#x').css("-webkit-animation-duration", "2s");
   $('#x').css("-webkit-animation-iteration-count", "1");
   //$('#x').css("-webkit-animation-play-state", "paused");
 }
 function turnY(){
   $('#y').css("-webkit-animation-name", "Yturn");
   $('#y').css("-webkit-animation-duration", "2s");
   $('#y').css("-webkit-animation-iteration-count", "1");
 }
 function turnZ(){
   $('#z').css("-webkit-animation-name", "Zturn");
   $('#z').css("-webkit-animation-duration", "2s");
   $('#z').css("-webkit-animation-iteration-count", "1");
 }
</script>
</body>
</html>

スタイル指定部分で、CSS3Animationのkeyframeルールを利用して、アニメーションの開始状態と終了状態を定義しています。後半のスクリプトでは、各div要素のtouchendイベントに合わせてkeyframeルールで指定したアニメーションをCSSに適用しています。

実行結果

機種	OS・Version	結果
iPhone 4	iOS 5.0	○
iPhone 5	iOS 6.0	○
Xperia	Android_1.6	動作せず
IS04	Android_2.1	○
X06HT	Android_2.2	すべてz軸回転
Xperia arc	Android_2.3	すべてz軸回転
GALAXY NEXUS	Android_4.0	○
IS12T	Windows Phone 7.5	動作せず

動作したもの（iOS）

正常動作(iOS)

動作したもの(Android)

正常動作(Android)

すべてz軸回転となったもの

軸の指定が利かない

Android1.6とWindowsPhoneでは動作せず、Android2.2および2.3の端末は回転はするものの、すべてz軸回転となりました。

CSS3アニメーションについては、各スマートフォンOS間で、サポート状況にまだまだ大きな差があります。サイトの機能を決定づける重要な動きにCSS3アニメーションを使用するのは、まだ控えた方がいいかもしれません。コンテンツを強調するためのちょっとしたギミックとして利用するなど、サポートされていないスマートフォンで動かなくても影響のない範囲にとどめて利用するとよいと思います。

x-fitは、多様なスマートフォンの画面幅・解像度・Javascript/CSSのサポート状況や機種依存を気にせず、動きのあるスマートフォン向けサイトを構築できます。是非製品情報やデモをご覧ください。

※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外の現象や例外のある可能性がありますことをご了承ください。

タグ:

現在地