CSS3はアニメーションも指定できる!

カテゴリ:CSSテクニック 2008年8月10日 00:34

すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。

先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。

内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。

ただ問題点として、対応ブラウザが webkit 系(Safari、Google Chromeなど)しかないこと。
また、正式に CSS3 として勧告されているわけではないこと(今 Safari でできることが実装されない可能性)。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。

ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。(Safari のダウンロードはこちらから

実際に動いている動画サンプル

▼EntryMore▼

上のサンプルで見てもらったアニメーションは、すべて CSS の簡単な指定だけで実現しています。下にソースサンプルを書きます。n

CSSソース

すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。

見てもらうと分かるように、たったこれだけです。
この数行を、普通の CSS のように書き連ねるだけでサンプルのようなアニメーションができるのです。簡単でしょ?n

まだ CSS3 については最近調べ始めたので、細かいことは説明できませんが、自分で理解している範囲で説明したいと思います。
また、webkit 系ブラウザだけの独自実装のため、-webkit- という接頭語(プレフィクス)をつける必要があります。n

動きを制御する -webkit-transition

今回の肝は、-webkit-transitionです。
これは、"変化の状態を指定する" プロパティです。
上記サンプルで書かれているものは以下の 3 つです。

  • -webkit-transition-propaty: all;
  • -webkit-transition-duration: 1s;
  • -webkit-transition-timing-function: ease-in-out;

-webkit-transition-property

-webkit-transition-property(以下、すべて-webkit-transition を省きます)は、なんのプロパティが変化の対象になるか、を指定します。サンプルではallなのですべての変化が対象です。

個別に指定する場合は、通常の CSS プロパティで指定します。例えば height background-color などが一番使われそうでしょうか。(実際のサンプルも、height と background-color だけ変化させています)

-webkit-transition-duration

duration は、変化が起きるとき、どれくらいの時間をかけて変化するのか、その時間を "秒数" で指定します。サンプルの場合は 1 秒かけて変化が起きる指定です。
つまり、:hover 疑似クラスで背景の色が白から赤に変わる用に指定していた場合、マウスオーバー時に白から 1 秒かけて赤に変化していくことになります。(イメージとしては時間的なグラデーション?)

たとえばこれを透明度に応用すれば、徐々に消えていく演出や、徐々に現れる演出などにも使えます。
これを現状で実装しようとすると、prototype.js と scriptaculous.js などを組み合わせたりして JavaScript で実装するしかありません。

-webkit-transition-timing-function

最後に timing-function。
これは、効果の加速度などを制御するプロパティとなります。
Flash を作ったことがある人なんかは、イージングの指定というとわかりやすいと思います。
イージングとは(自分的解釈なので間違ってたらすいません;)、効果の度合の時間配分を行う設定です。

一定時間と設定すると、効果は単調で一定のスピードで変化します。
これを、最初を早く、終わりを遅く、という設定にすると、まるで車がブレーキをかけたような感じで変化します。(最初は早く変化し、終わりに近づくにつれて変化が少なくなっていく感じ)n

以上が先日参加した CSS Reloaded で覚えてきた驚きの CSS プロパティです。(ほんとは他にもあるけど、これが一番興奮した)
今回は説明だけにとどめて、次回はこれを応用してちょっと面白い効果を作ってみたいと思います。

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

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

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/90

トラックバック

CSS3でプルダウンメニューと可変角丸囲み

今度のCSSはとってもすごいらしい。rなんと、今までFlashでしか実現できなかったアニメーションによるプルダウンメニューができるらしいのだ。r□CS...

by地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記 2008年9月16日 23:20

コメント

1 - なかにしゆうすけ さん

すっごいですねー!nこれはおもしろいしありがたい。

2008年8月11日 20:10

2 - 菊池 さん

はじめまして、管理人様nWeb Directions Eastのオーガーナイザーの菊池と申し上げます。nCSS Reloadedについて掲載を頂きましてありがとうございます。nまた動画まで作成されたとのことで非常に驚いております!nすばらしいですね!nさてイベントのスライドを掲載いたしましたので、nもし宜しければご覧にいただければと思います。nCSS Reloadedhttp://builder.japan.zdnet.com/member/u509515/blog/2008/09/14/entry_27013761/今後とも引き続き宜しくお願いいたします。nきくちWeb Directions East

2008年9月14日 22:04

3 - えど Author Profile Pageさん

2 - 菊池さんコメントありがとうございます!nCSS Reloadedはとても興奮しました!n最初、そこまで収益があるのかな?nという大変失礼な思いで出席したのですが、n終わってみればとても興味深く、nまたさらにCSSが好きになるとてもいいイベントでした!nスライドは、もう一度よく見て復習したいと思います。nありがとうございました!

2008年9月14日 22:22