アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ

ハイブリッドアプリ開発でも利用出来る、JavaScriptCSSのアニメーションライブラリを集めてみました。



最近ではCanvasWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイントにまとめてみました。



jQueryのanimation代替え系 Velocity.js



jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。





MovieCropデモ



Site jQuery.animate()の代替えライブラリ「Velocity.js」
GitHub https://github.com/julianshapiro/velocity
Demo http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License MIT


CSSスプライト MovieCrop.js



CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。背景要素をコントロールするため、フレーム分の画像を用意する必要がありますが、ほかのTween系のライブラリと組み合わせることで、より複雑なアニメーションも可能でしょう。





MovieCropデモ



Site シンプルなスプライトアニメーションライブラリ「MovieCrop.js」
GitHub https://github.com/mach3/js-moviecrop
Demo http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License MIT


CSSアニメーションライブラリ1 Animate.css



既存スクリプトに影響を与えない、CSSのみで出来たライブラリです。
クロスブラウザに対応しており、タグのclass要素に指定するだけで利用できます。パララックスで利用したり、他のアニメーションライブラリと組み合わせても良さそうです。





Animate.cssデモ



Site http://daneden.github.io/animate.css
GitHub https://github.com/daneden/animate.css
Demo サイト内で確認可能
License MIT


CSSアニメーションライブラリ2 magic animations



こちらも、CSSのみのアニメーションライブラリの紹介です。ブラウザサポートも明確に記載されており、CSSの利用方法も解説がやさしく丁寧です。





magicデモ




Site http://www.minimamente.com/magic-css3-animations-by-minimac
GitHub https://github.com/miniMAC/magic
Demo http://www.minimamente.com/example/magic_animations/
License MIT


JavaScriptCSSの magic animations



実際のアニメーションは前出のAnimate.cssを利用しており、スクリプト自体はjQueryなど特定のフレームワークに依存しません。



利用方法は、呼び出しのスクリプトを定義し、あとは各タグでclass属性と専用の属性でパラメータを指定するだけです。そのためJavaScriptに汚染されず、全体のコードがすっきりとするでしょう。





wowデモ



Site http://mynameismatthieu.com/WOW/index.html
GitHub https://github.com/matthieua/WOW
Demo http://www.minimamente.com/example/magic_animations/
License MIT


すぐに使えるアニメーションのライブラリとしてまとめてみました。ぜひ使ってみてください!

パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」

こんにちは、鴨田です。

今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。
春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。

とはいえ、最近は視差効果で奥行きを表現するというよりも、
単純にスクロールに連動してアニメーションさせることも含めて、
パララックスサイトと呼んでいるが多いのではとも思います。
何かと話題のスマホアプリ「comm」の紹介ページもそうですね。

そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。

今回ご紹介するのは、「ScrollTween.js」というプラグインです。
シーエーモバイル社のコーポレートサイトを作成するために開発され、
せっかくだからということで、公開されているようです。

経緯に関しては、下記スライドをご覧下さい。
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
作者である白石さんの体験談です。

ScrollTween.js | github
上記から、プラグインとサンプルをまとめて、ダウンロードすることが可能です。
サンプルにちょっとした使い方は載っているのですが、あまり詳しくは書いてないので、
この記事で補足できればと思います。

とはいえ、自分もちゃんとしたJavaScriptを書いたり読んだり出来るわけではなく、
見よう見まねのところもありますので、コード的におかしいところがあってもご容赦ください。



● ダウンロード



ScrollTween.js | github
上記ページ、「ZIP」ダウンロードボタンを押して、ダウンロードしてください。

中身は、プラグイン本体である「ScrollTween.js」、
ライブラリとしての「jquery.js」「jquery.mousewheel.js」、
デモページ「demo1.html」が入っています。



● サンプルページ構成



・demo.html
jquery-1.8.1.min.js
jquery.mousewheel.js
・ScrollTween.js

demo1.htmlを参考にして、demo.html新規で作成します



● demo.htmlコード





<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScrollTween Demo</title>
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="ScrollTween.js"></script>
<script>
$(function() {
  'use strict';
  var containerDiv = $('#container');
  var container = ScrollTween.container(containerDiv);
    container.add("#cnt1", function(tween) {
      tween
        .to(100, tween.styles().topOut().center(100))
        .range(200, 300, tween.styles().middle(-100))
        .to(400, tween.styles().rightOut());
    });
    container.add("#cnt2", function(tween) {
      tween
        .to(200, tween.styles().bottomOut().center())
        .range(300, 400, tween.styles().middle())
        .to(500, tween.styles().leftOut());
    });
    container.add("#cnt3", function(tween) {
      tween
        .to(400, tween.styles().center().middle())
        .to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
        .to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
        .to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
        .to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
    });
    container.play();
});
</script>
<style>
html, body {margin: 0; padding: 0; height: 100%;}
#container {width: 100%;height: 100%; display: block;}
.style1 {padding: 20px; border: 2px dotted #009; font-size: 24px; color: #333; background: #ccc;}
</style>
</head>
<body>
<div id="container">
  <div id="cnt1" class="style1">Top - Center - Right</div>
  <div id="cnt2" class="style1">Bottom - Center - Left</div>
  <div id="cnt3" class="style1">Opacity 0 - 1 - 0</div> 
</div>
</body>
</html>




● HTMLのbody部分説明





<div id="container">
  <div id="cnt1" class="style1">Top - Center - Right</div>
  <div id="cnt2" class="style1">Bottom - Center - Left</div>
  <div id="cnt3" class="style1">Opacity 0 - 1 - 0</div> 
</div>


div#containerは必須要素ですので、
一番外側のラッパーとして、配置する必要があります。

そして、div#containerの内容要素がアニメーションの対象となります。
各要素に適切なidを振って下さい。

ここでは、3つの要素に#cnt1~#cnt3と名付けました。



JavaScriptの説明





$(function() {
  'use strict';
  var containerDiv = $('#container');
  var container = ScrollTween.container(containerDiv);
    container.add("#cnt1", function(tween) {
      tween
        .to(100, tween.styles().topOut().center())
        .range(200, 300, tween.styles().middle())
        .to(400, tween.styles().rightOut());
    });
    container.add("#cnt2", function(tween) {
      tween
        .to(200, tween.styles().bottomOut().center(100))
        .range(300, 400, tween.styles().middle(-100))
        .to(500, tween.styles().leftOut());
    });
    container.add("#cnt3", function(tween) {
      tween
        .to(400, tween.styles().center().middle())
        .to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
        .to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
        .to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
        .to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
    });
    container.play();
});


#cnt1では、移動アニメーションを用いています。

.to(100, tween.styles().topOut().center())
.range(200, 300, tween.styles().middle())
.to(400, tween.styles().rightOut());

スクロール100で、中央位置に#cnt1が画面インします。
スクロール100~200で画面上部から画面中央に移動します。
スクロール200~300は静止します。
スクロール300~400で画面中央から画面右側に移動します。
スクロール400で、画面アウトします。

#cnt2では、少し位置を変えています。

.to(200, tween.styles().bottomOut().center(100))
.range(300, 400, tween.styles().middle(-100))
.to(500, tween.styles().leftOut());

スクロール200で、中央位置から右に100pxずれた場所に#cnt1が画面インします。
スクロール200~300で画面上部から画面中央より上に100pxずれた場所に移動します。
スクロール300~400は静止します。
スクロール400~500で画面中央から画面右側に移動します。
スクロール500で、画面アウトします。

#cnt3は、透明度を変えています。

.to(400, tween.styles().center().middle())
.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });

スクロール400で、画面中央に配置します。
スクロール400~600で透明度を0から1へ変更します。
スクロール600~800は静止します。
スクロール800~1000で透明度を1から0へ変更します。
スクロール1000で、消滅します。

アニメーション用に用意されている機能でよく使うのは下記ではないかと思います。

遷移:topOut, bottomOut, leftOut, rightOut
位置:center, middle, top, bottom, left, right

その他、イージングやキーフレームも用意されているようなのですが、
ちゃんとした使い方がよく分かっていないので、
いろいろと試してみたい方はScrollTween.jsのソースコード
一度読んでみるといいのではないでしょうか。



● デモ


下のiframe内でスクロールしてください。


デモページ1



● デモ2


下のiframe内でスクロールしてください。


デモページ2
少し、それっぽい構成にしてみました。



いかがでしょうか。
結構、簡単にアニメーション出来るのではないかと思います。
皆様も是非試してみてください!

【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ

こんにちは、橋本です。

今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。
iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。
そんなときにこの記事を参考にしてもらえると幸いです。

今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。
IEFirefoxOperaなどの他のブラウザは対象外です。
(なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。)


早速ですが、CSS3でアニメーションを実装するためには、以下の2つの方法があります。

  1. 1. transitionプロパティでアニメーションを定義する

  2. 2. animationプロパティでアニメーションを定義する


また、アニメーションを定義する際には、通常のプロパティに加えてtransformプロパティを定義することによって、
より動きのあるアニメーションを定義することも可能です。
今回は、上記の2つのアニメーションの定義の方法に加えて、transformプロパティの使用方法についても見ていきたいと思います。


transitionプロパティでアニメーションを定義する


まずは、transitionプロパティでアニメーションを定義する方法です。

transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。
開始時と終了時を定義する方法には、以下の二種類があります。

  1. 1. hoverなどの擬似クラスを使用する方法

  2. 2. javascriptを使用して、CSSのプロパティを変更する方法


transitionでアニメーションを定義する際に、以下の4つの項目を指定することができます。

  1. 1. アニメーションにかかる時間

  2. 2. 対象のプロパティ

  3. 3. イージング

  4. 4. 遅延時間


この4つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。

まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。

transition: アニメーションにかかる時間 対象のプロパティ イージング 遅延時間;

例:


transtion: 0.5s background-color linear 1s;

各プロパティは順不同で記載することが可能ですが、アニメーションにかかる時間と遅延時間の順序だけは逆にすることができません。
また、各プロパティは省略可能で、省略した場合の初期値は以下のとおりとなります。

  • ・アニメーションにかかる時間: 0s

  • ・対象のプロパティ: all

  • ・イージング: ease

  • ・遅延時間: 0s


transitionについては、複数の設定をカンマ区切りで同時に指定することも可能です。
また、後で出てくる個別に項目を設定するプロパティについても、カンマ区切りで複数同時に指定することが可能です。

例:


transtion: 0.5s background-color linear 1s, 1s height linear;
transtion-duration: 0.5s, 1s;


では、各項目について詳しく見ていきたいと思います。

まずはアニメーションにかかる時間ですが、秒単位(s)、もしくはミリ秒単位(ms)で指定します。
例えば、1秒だと1sもしくは1000ms、0.5秒だと0.5sもしくは500msといった風に設定します。

例:


transiton: 0.5s;

アニメーションにかかる時間はtransition-durationプロパティで個別に設定することが可能です。

例:


transition-duration: 0.5s;


次に対象のプロパティですが、このプロパティは特定の要素にのみtransitionを適用したいときに指定します。
指定しない場合には、all(すべての要素を対象とする)を指定したのと同様に扱われます。

例:


transtion: 0.5s background-color;

対象のプロパティはtransition-propertyプロパティで個別に設定することが可能です。

例:


transition-property: background-color;

ちなみに、特定のプロパティをtransitionで指定した場合、指定されていないプロパティにはアニメーションが適用されず、
瞬時に変更後の値が適用されます。

例えば、以下の例の場合、background-colorは1秒間のアニメーションで色が変化しますが、
heightとwidthは一瞬で変化します。


div {
    height: 50px;
    width: 50px;
    background-color: #000;
    -webkit-transition: 1s background-color;
}

div::hover {
    height: 100px;
    width: 100px;
    background-color: #fff;
}


次にイージングですが、イージングはアニメーションの変化のパターンのこと言います。
具体的には以下の値を設定することが可能です。

  • ・ease(開始時点と終了時点を滑らかに再生する)

  • ・linear(一定の間隔で再生する)

  • ・ease-in(開始時点をゆっくり再生する)

  • ・ease-out(終了時点をゆっくり再生する)

  • ・ease-in-out(開始時点と終了時点をゆっくり再生する)


この他に、cubic-bezier関数を使って、イージングを独自に設定することも可能です。
以下の例はeaseと同じイージングをcubic-bezier関数を使って設定する例です。

例:


transition: 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);

cubic-bezierについては、以下のリンクが参考になるかと思います。
Cubic Bezier timing function compatible with -webkit-transition-timing-function

イージングはtransiton-timing-functionプロパティで個別に設定することが可能です。

例:


transition-timing-function: linear;


最後に遅延時間です。
遅延時間を設定すると、設定した時間分アニメーションの開始を遅らせることができます。
遅延時間にはアニメーションにかかる時間と同様に、秒単位(s)もしくはミリ秒単位(ms)で時間を設定します。

遅延時間はtransiton-delayプロパティで個別に設定することが可能です。

例:


transition-delay: 1s;


簡単なtransitionのサンプルです。
実際に動きを確認してみてください。
サンプル

animationプロパティでアニメーションを定義する


次に、animationプロパティでアニメーションを定義する方法を見ていきたいと思います。

animationでアニメーションを定義する際に、以下の6つの項目を指定することができます。

  1. 1. キーフレーム名

  2. 2. アニメーションにかかる時間

  3. 3. イージング

  4. 4. 遅延時間

  5. 5. 繰り返しの回数

  6. 6. 再生方向


animationプロパティは以下の形式で指定します。

animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返しの回数 再生方向;

animationプロパティではキーフレーム名が必須の設定項目となります。
キーフレーム名には、@keyframes文で定義したキーフレームアニメーションのキーフレーム名を指定します。

@keyframes文は以下の形式で定義します。



@keyframes キーフレーム名 {
    0% {
        background-color: #f00;    
    }
    50% {
        background-color: #0f0;
    }
    100% {
        background-color: #00f;
    }
}


{}の中身ですが、開始時点の状態を0%{~}、終了時点の状態を100%{~}に指定し、途中の状態を数字+%の形式で指定していきます。
開始時点の状態は0%{~}ではなくfrom{~}、終了時点の状態は100%{~}ではなくto{~}とすることも可能です。

animetionのキーフレーム名は、animation-nameプロパティで個別に設定することも可能です。

例:


animation-name: anime;

@keyframes 'anime' {
    0% {
        background-color: #000;    
    }
    100% {
        background-color: #fff;    
    }
};


アニメーションにかかる時間、イージング、遅延時間についてはtransitionと同様の設定になります。
それぞれ、以下のプロパティで個別に設定することが可能です。

  • animation-duration... アニメーションにかかる時間

  • animation-timing-function ... イージング

  • animation-delay... 遅延時間


繰り返しの回数は、アニメーションを繰り返す回数です。
デフォルトではアニメーションの再生は一回となりますが、繰り返しの回数を指定することでアニメーションを繰り返し実行することが可能です。
また、回数の代わりにinfiniteという値を設定することで、無限にアニメーションを繰り返すことも可能です。
個別に繰り返しの回数を設定したい場合には、animation-iteration-countプロパティで指定します。

例:


animation-iteration-count: infinite;

再生方向は2回以上の繰り返しのアニメーションを実行した際の2度目にあたるアニメーションの実行方向になります。
normalを指定した場合には、開始時点の状態から終了時点の状態へのアニメーションを繰り返しますが、
alternateを指定した場合には、通常の方向のアニメーションと逆再生の状態のアニメーションを繰り返し行うようになります。

再生方向を個別に指定したい場合には、animation-directionプロパティに値を設定します。

例:


animation-direction: alternate;

この他に、アニメーションの再生と一時停止を行うanimation-play-stateプロパティと遅延時間と再生後の表示状態を指定するanimation-fill-modeプロパティがあります。

animation-play-stateプロパティには、runningとpausedという値を設定することが可能です。
runningはアニメーションが実行されている状態です。pausedはアニメーションが一時停止している状態となります。
animation-play-stateがrunningに設定されている状態から、pausedに変更した場合、pausedに変更された時点の状態でアニメーションが一時停止することになります。
また、この状態でanimation-play-stateをrunningに変更すると、pausedが設定される直前の状態からアニメーションが再開されることになります。

例:


// マウスオーバー時のみアニメーションを止める場合
a::hover {
  animation-play-state: paused;
}


animation-fill-modeには、none,forwards, backwards, bothのいずれかを指定することが可能です。
noneを指定すると、遅延時間とアニメーション再生後の状態はアニメーション開始前の状態となります。
forwardsを指定すると、再生後の状態がアニメーション終了時の状態となります。
backwardsを指定すると、遅延時間の状態が、アニメーション開始時の状態となります。
bothを指定すると、遅延時間の状態がアニメーション開始時の状態、再生後の状態がアニメーション終了時の状態となります。

例:


animation-fill-mode: both;


簡単なanimationのサンプルです。
実際に動きを確認してみてください。
サンプル

transformプロパティの使い方


最後にtransformプロパティの使い方を見ていきたいと思います。

transitionプロパティの開始時と終了時の状態や、@keyframesのキーフレームの状態を定義する際に、
通常のCSSのプロパティ(height, width, background-colorなど)に加えて、transformプロパティによる変形処理を適応することで、
より高度なアニメーションを実装することが可能になります。

transformプロパティの定義方法は、以下の形式となっています。

transform: 変形処理(transform関数);

transform関数には、以下のものがあります。

  • ・座標移動(translate, translate3d, translateX, translateY, translateZ)

  • ・拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)

  • ・回転(rotate, rotate3d, rotateX, rotateY, rotateZ)

  • ・スキュー(skew, skewX, skewY)

  • ・マトリクス処理(matrix, matrix3d)

  • ・透視投影(perspective)



transformには、2D処理と3D処理があり、上記のリストで強調されている関数が3D処理の関数となっています。

では。具体的に使い方を見て行きましょう。
今回は、上記リストの上から4つの基本的なtransform関数の使い方について見ていきたいと思います。

座標移動(translate, translate3d, translateX, translateY, translateZ)


translate関数は座標移動を行うための関数です。
translate関数は引数として、X軸の移動距離、Y軸の移動距離を指定します。

例:


transform: translate(100px, 100px);


translate3d関数は、translate関数にZ軸の移動距離を加えたものです。

例:


transform: translate3d(100px; 100px; 100px);


translateX, translateY, translateZは、それぞれ、X軸、Y軸、Z軸の移動に特化した関数です。

例:


transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);


簡単な座標移動のサンプルです。
サンプル

拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)


scale関数は拡大縮小を行うための関数です。
scale関数は引数として、X軸の拡大縮小の倍率、Y軸の拡大縮小の倍率を指定します。

例:


transform: scale(2.0, 2.0);


scale3d関数は、scale関数にZ軸の拡大縮小の倍率を加えたものです。

例:


transform: scale3d(2.0; 2.0; 2.0);


scaleX, scaleY, scaleZは、それぞれ、X軸、Y軸、Z軸の移動に特化した関数です。

例:


transform: scaleX(2.0);
transform: scaleY(2.0);
transform: scaleZ(2.0);


簡単な拡大縮小のサンプルです。
サンプル

回転(rotate, rotate3d, rotateX, rotateY, rotateZ)


rotate関数は2D空間で時計回りに回転を行うための関数です。
rotate関数は引数として、回転する角度を指定します。
角度を指定する際にはdegという単位で指定します。

例:


transform: rotate(90deg);


rotate3d関数は、4つの引数を設定します。
最初の3つの引数で[x, y ,z]の方向ベクトルを定義し、
その方向ベクトルを元に4つめの引数で指定した角度分の回転を時計周りに行うための関数です。

例:


transform: rotate3d(1, 1, 0, 180deg);


rotateX, rotateY, rotateZは、それぞれ、X軸、Y軸、Z軸を元に回転処理を行う関数です。
引数には、回転する角度を指定します。

例:


transform: rotateX(90deg);
transform: rotateY(90deg);
transform: rotateZ(90deg);


簡単な回転のサンプルです。
サンプル

スキュー(skew, skewX, skewY)


skew関数は対象の要素の座標を歪ませる関数です。
skew関数は引数として、X軸の傾斜角度、Y軸の傾斜角度を指定します。

例:


transform: skew(90deg, 90deg);

上記の例では、対象の要素の座標軸が、X軸方向に90度、Y軸方向に90度の傾いた状態になります。
実際に適用した状態は、後で記載するサンプルで確認してもらえるとわかりやすいかもしれません。

skewX, skewYは、それぞれ、X軸、Y軸の座標の歪みに特化した関数です。
例:


transform: skewX(90deg);
transform: skewY(90deg);


簡単なスキューのサンプルです。
サンプル

transformの原点について


transform関数で指定した変形処理は、対象の要素の中心座標を原点として適用されます。
具体的には、X軸が50%、Y軸が50%、Z軸が0の位置が初期値となっています。

transform-originプロパティを用いることで、この中心座標を変更することが可能です。
transform-originプロパティには、X座標の位置、Y座標の位置、Z座標の位置を引数として渡すことができます。
引数は、%で指定することも可能ですし、px単位で指定することも可能です。
また、以下のキーワードで指定することも可能です。

  1. ・left(X座標の位置に0%を指定するのと同じ)

  2. ・right(X座標の位置に100%を指定するのと同じ)

  3. ・center(X座標、もしくはY座標の位置に50%を指定するのと同じ)

  4. ・top(Y座標の位置に0%を指定するのと同じ)

  5. ・bottom(Y座標の位置に100%を指定するのと同じ)


例:


transform-origin: 10% 10% 0;


簡単な原点変更のサンプルです。
サンプル

iOS端末上でのtransform処理について


iOS上でtransform処理を使ってアニメーションを実装する際には、2D処理を実装する場合でも3D処理の関数を使うようにします。
なぜかといいますと、iOS端末では、3D処理の関数を使う場合のみ、GPUアクセラーレーションが効くようになっているためです。
GPUアクセラレーションが効く場合と効かない場合では、アニメーションの滑らかさに天と地ほどの差が出ますので、必ず3D処理の関数を使うようにしてください。

例:


    // Z軸の処理に0を入れて2Dの処理にする
    -webkit-transform: translate3d(10px, 10px, 0); 


また、iOS端末ではアニメーションを実行した際に画面にチラつきが出る場合があります。
このチラつきをなくすためには、以下のようにアニメーションに関する項目全てに3D処理を入れてGPUアクセラレーションを効かせることで解決します。

例:


.animation {
    -webkit-transform:translate3d(0,0,0);
}


上記の現象については、以下の記事が参考になるかと思います。
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法


かなり長くなってしまいましたが、CSS3のアニメーションについてほぼ網羅できたのではないかと思います。
この記事を参考に、実際にCSS3アニメーションを使っていろいろと遊んでみてください!