一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

CSS3で簡単なアニメーションつくってみた

今回はCSS3のtransitionとanimationを使って簡単なアニメーションをつくってみました。

サンプルはこんな感じです。

transition使用
http://jsfiddle.net/danimal141/j5LAs/3/embedded/result/


animation使用
http://jsfiddle.net/danimal141/75mjG/3/embedded/result/


ソシャゲとかでよくある、カードが回転するアニメーションをイメージして作ってみました。transitionのほうはクリック(タップ)で回転、animationのほうは一定時間ごとに回転します。


クオリティ低いんですけど、サンプルなので勘弁してください。。


では早速コードのほうを。

1, transitionバージョン

HTML

<div id="wrap">
    <p id="target"></p>
</div>
CSS

body{
    background:#000;
}

#wrap{
  position:relative;
  -webkit-perspective:400;
}

#target{
    position:absolute;
    left:50%;
    margin-left:-100px;
    margin-top:100px;
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transform-style:preserve-3d; 
    -webkit-transition-property:-webkit-transform, background-color;
    -webkit-transition-duration:3s;
}

#target.rotated{
    -webkit-transform: rotateY(180deg);
    background-color:blue;
}
JavaScript

$("#target").on("click", function(){
    $(this).toggleClass("rotated");
});


こんな感じです。


簡単になにをやりたいか説明すると、
アニメーション実行後のゴールの状態を.rotatedにあらかじめ指定しておいて、そのクラスをjQueryのtoggleClassで付けたり外したりします。

そしてスタートの状態 #targetから、ゴールの状態 #target.rotatedにいくまでの過程(アニメーション)を-webkit-transitionで指定しております。


で、肝心のtransitionのスタイルのとこについてですが、

まず-webkit-perspectiveというスタイルがあります。
これは回転の際に奥行きを出すために使用するスタイルで、回転させたい要素の親要素に指定してやる必要があります。


次に-webkit-transform-style。
こちらはデフォルトではflatになっているので3Dアニメーションさせたいときはpreserve-3dを指定します。(ちなみにこの指定なくても普通に3Dアニメーションしたんですが、勝手に指定変わる仕組みなんですかね。。)


そしてメインの部分-webkit-transitionですが、


・transition-property→アニメーションさせるプロパティの指定
・transition-duration→アニメーションの再生時間(s)
・transition-timing-function→アニメーションの動き方(linear, easeなど)
・transition-delay→アニメーションの実行タイミングを遅らせる時間(s)


って感じで指定します。
これらは-webkit-transition:-webkit-transform 5s ease-in みたいにまとめて指定もできます。


んであとはプロパティのtransform:rotateYを指定して、Y軸に沿って180°回転するように指定してやれば完了です。


2, animationバージョン

HTML

<div id="wrap">
    <p id="front"></p>
    <p id="back"></p>
</div>
CSS

body{
    background:#000;
}
#wrap{
    position:relative:
    -webkit-perspective:300;
}

#wrap p{
    position:absolute;
    left:50%;
    margin-top:100px;
    margin-left:-100px;
    width:200px;
    height:200px;
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
}

@-webkit-keyframes front-anime{
   0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 45% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 55% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
}

@-webkit-keyframes back-anime{
   0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 45% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 55% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
}

#front{
    background-color:red;
    -webkit-animation: front-anime 5s infinite alternate ease-in;
}

#back{
    background-color:b
    -webkit-animation: back-anime 5s infinite alternate ease-in;
}


次にanimationのほうです。

こちらは-webkit-keyframesにあらかじめアニメーションを指定しておいて、一定間隔ごとに勝手に動いてくれるようにしているので、JSは必要ありません。


やってることとしては、表用と裏用のpタグを二つ用意しておいて、
片方が見えてるとき(回転していない状態)は、もう片方は見えない状態(180°回転した状態)になるように指定して、それを交互に繰り返しています。

またこの際、180°回転時の裏面を見えないようにするために、-webkit-backface-visibility:hiddenを指定しています。


ちなみにここでも-webkit-perspectiveを指定しているのですが、どうやらうまく効いてない臭くて、原因が全くわからないので、どなたかアドバイス頂けると助かります。。


あとメインとなるanimationの指定は基本的にtransitionと似ていて、


・animation-name→keyframesで定義したアニメーションの名前(名前は自由)
・animation-duration→アニメーションの再生時間(s)
・animation-timing-function→アニメーションの動き方(linear, easeなど)
・animation-iteration-count→アニメーションの再生回数(数値あるいはinfinite)
・animation-direction→アニメーションの再生方向(normalあるいはalternate)
・animation-delay→アニメーションの実行タイミングを遅らせる時間(s)


こんな感じです。

あとはkeyframesに任意のアニメーション名をつけて、%区切りで状態を指定していってやればOKです。


CSS3のアニメーションは


・JSとかに比べて、実装しやすい
・3D関連のCSS属性では、GPUアクセラレーションが効くので、より滑らかに動く


などなど、なにかと良い事も多いと思います。


他にもアニメーションを実装する方法はいろいろあるし、どんなアニメーションをつくりたいかにもよると思いますが、その時々でうまく技術を使い分けていきたいですね。

がんばろー。


小さな事からコツコツと。