Animationを使ってみました。Animationを使ってみました。AnimationTweetこんにちは。Animationを使ってみたいと思います。Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。こちらをご覧ください。Transformsこれはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。以下のように、キーフレームを定義します。キーフレームの定義は、「@-webkit-keyframes」+「アニメーション名」で行います。}}キーフレームの中では、fromとtoという要素を用いて、アニメーションの始まりの状態と終わりの状態を定義します。fromとtoの代わりに、「%」指定を用いて、経過時間毎の細かい変化を指定することもできます。}}キーフレームで定義したアニメーションの状態については、一般的なcssのプロパティや「-webkit-transform」を用いた変化を指定出来る他、「animation-timing-function」という指定で、アニメーションの動きの速さの変化を定義することも出来ます。これについては、ease、linear、ease-in、ease-out、ease-in-out、の四種類を既定値として指定出来る他、cubic-bezierという指定を用いて、独自の動きを定義することも出来ます。animation-timing-functionについては、こちらのページが参考になります。function次に、定義したアニメーションを実際に使用する方法ですが、アニメーションを適用したい要素に対して、適用するアニメーション名や、オプションを指定していきます。absolute;}「-webkit-animation-name」は適用するアニメーションの名前です。sample3;」といった形で複数指定することも可能です。「-webkit-animation-duration」はアニメーションを実行する時間です。キーフレームで指定した「%」指定はは、ここで定義する時間に対する割合になります。デフォルト値は「0」となっており、「0」の場合にはアニメーションはは実行されません。「-webkit-animation-iteration-count」はアニメーションの実行回数です。「infinite」と指定すると、回数無制限に実行します。「-webkit-animation-direction」は反復の有無です。デフォルト値は「normal」です。「alternate」と指定することによって、fromからto(0%から100%)までアニメーションを実行した後、toからfromに対して、再度アニメーションを行うように出来ます。「-webkit-animation-play-state」は実行状態です。「running」と指定することで、アニメーションを実行状態にし、「paused」と指定することで停止状態にすることができます。javascriptを使ってアニメーションを制御するときに使用するのかもしれませんが、正直使い勝手がいまいち分かっていません(すみません)。「-webkit-animation-delay」は実行までの待ち時間です。ここで指定した時間の経過後、アニメーションが実行されます。以上をふまえて簡単にサンプルを作ってみました。betaをお持ちの方は是非実行してみてください。(一応iPhoneでもアニメーションを表示することは出来るのですが、少し挙動不信です。betaを使って見ていただけたらと思います。)サンプルコードはこちらです。</body></html>javascriptと上手く組み合わせれば、さらに複雑で面白いアニメーション効果を作ることも出来ると思います。皆さんも是非試してみてください。Animationを使ってみました。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。