to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

GALAXY S III ProgreでCSS3アニメーションが利かなくなる場合がある

こんにちは。x-fitチーム・エバンジェリストの渡辺です。秋冬モデルがほぼ出そろい、弊社では今日も元気に新機種を調べ上げています。
先日発売されたGALAXYSIII Progreで、CSS3アニメーションが一部利かなくなることがありましたので、まとめてみようと思います。
 
 

CSS3アニメーション

 
CSS3アニメーションは、一般的にAnimation・Transition・Tranformプロパティを使って実現します。それぞれのプロパティは、以下のような役割を持っています。
  • Animation:アニメーション定義そのもの
  • Transition:指定したプロパティの実行時間を指定
  • Transform:要素に対する変形・移動を指定
transformプロパティで、要素に対する変形・移動を定義し、transitionで、transformで指定した変形・移動をどの程度の時間で行うかを指定、animationプロパティで、作成した変形・移動・時間をまとめてアニメーションとして定義し、要素に適用することでアニメーションを実行するようにします。
 

Galaxy S III Progreでの事象

CSS3のTransitionを使ったアニメーションが無効になる現象が確認されました。発生条件は、「Transformプロパティに、translateまたはtranslate3dを指定した場合の、画面表示完了後2回目以降のアニメーション」となります。画面表示1回目のアニメーションは行われますが、2回目以降はTransformプロパティで指定した移動や変形はされるものの、Transitionが利かなくなるため、移動や変形は瞬時に行われるようになり、アニメーションしません。
 

サンプルコード

以下のようなコードで確認してみます。
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" \=""> 
  <title>transform</title>
  <style type="text/css">
    body,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
      margin:0;
      padding:0;
    }

    
    .box{
      width:100px;
      height:100px;
      background-color: green;

      -webkit-transition: -webkit-transform 0.5s;
      -moz-transition: -moz-transform 0.5s;
      -o-transition: -o-transform 0.5s;
      -ms-transition: -ms-transform 0.5s;
      transition: transform 0.5s;
    }
    .box3d{
      width:100px;
      height:100px;
      background-color: blue;

      -webkit-transition: -webkit-transform 0.5s;
      -moz-transition: -moz-transform 0.5s;
      -o-transition: -o-transform 0.5s;
      -ms-transition: -ms-transform 0.5s;
      transition: transform 0.5s;
    }
    .boxMarginLeft{
      width:100px;
      height:100px;
      background-color: gold;

      -webkit-transition: margin-left 0.5s;
      -moz-transition: margin-left 0.5s;
      -o-transition: margin-left 0.5s;
      -ms-transition: margin-left 0.5s;
      transition: margin-left 0.5s;
    }

    .move{
      -webkit-transform:translate(70px, 0);
      -moz-transform:translate(70px, 0);
      -o-transform:translate(70px, 0);
      -ms-transform:translate(70px, 0);
      transform:translate(70px, 0);
    }
    .return{
      -webkit-transform:translate(0, 0);
      -moz-transform:translate(0, 0);
      -o-transform:translate(0, 0);
      -ms-transform:translate(0, 0);
      transform:translate(0, 0);
    }

    .move3d{
      -webkit-transform:translate3d(70px, 0, 0);
      -moz-transform:translate3d(70px, 0, 0);
      -o-transform:translate3d(70px, 0, 0);
      -ms-transform:translate3d(70px, 0, 0);
      transform:translate3d(70px, 0, 0);
    }
    .return3d{
      -webkit-transform:translate3d(0, 0, 0);
      -moz-transform:translate3d(0, 0, 0);
      -o-transform:translate3d(0, 0, 0);
      -ms-transform:translate3d(0, 0, 0);
      transform:translate3d(0, 0, 0);
    }

    .moveMl{
      margin-left: 100px;
    }
    .returnMl{
      margin-left: 0;
    }

  </style>
</head>
<body>

<h1>transform</h1>
<div class="contetnt">
  <div class="box evtTgt"></div>
</div>
<hr/>
<h1>transform3d</h1>
<div class="contetnt">
  <div class="box3d evtTgt"></div>
</div>
<hr/>
<h1>margin-left</h1>
<div class="contetnt">
  <div class="boxMarginLeft evtTgt"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
  $(".contetnt").on("touchstart", ".box", function(){
    var $this = $(this);
    if($this.hasClass("move")){
      $this.removeClass("move").addClass("return");
    }else{
      $this.removeClass("return").addClass("move");
    }
  }).on("touchstart", ".box3d", function(){
    var $this = $(this);
    if($this.hasClass("move3d")){
      $this.removeClass("move3d").addClass("return3d");
    }else{
      $this.removeClass("return3d").addClass("move3d");
    }
  }).on("touchstart", ".boxMarginLeft", function(){
    var $this = $(this);
    if($this.hasClass("moveMl")){
      $this.removeClass("moveMl").addClass("returnMl");
    }else{
      $this.removeClass("returnMl").addClass("moveMl");
    }
  });

</script>
</body>
</html>
 
画面上の3つの四角形があります。上から、transform、transform3d、margin-leftのプロパティを使って四角形を移動させるようアニメーションが設定されています。四角形をタップするイベントに合わせて移動します。初回の移動はアニメーションしますが、2回目以降は瞬時に移動してしまい、アニメーションしません。margin-leftを使ってアニメーションさせた場合は2回目以降もきちんとアニメーションしながら動きます。
 
 

回避策はあるか

上記のように、marginなど、他のプロパティを利用して同じ動きが可能なアニメーションであれば、書き換えることで回避することはできると思います。translateでないと表現できないようなアニメーションの場合、CSS3での回避策は見つけられていません。
CSS3アニメーションを使ったサイトを運営されている方は、一度実機での確認をしてみることをお勧めします。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 

 

タグ: 
このエントリーをはてなブックマークに追加