css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net

css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-

[merlion45]

これ面白い

[Yukarigohan]

transitionサンプル

[philosophie]

transition demo

[typista]

ぽけったー css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた

[kyadhiai]

cssデザイン

[till19]

m9（｀・ω・´)

[nakomaru]

CSSアニメーション。背景を出すの下から上に登っていくようなのはどうやるの？(つД｀)

[nikutaiha]

css3,アニメーションサンプル

[sunakin5]

css3参照

[hedeyoshi]

便利だなー。

[maRk]

おもしろい！

[Y_Kakizoe]

CSS3ヤバすぎ。やべぇ全部左右反対に見えてきた。あ、マジでヤバい。

[raiga448]

CSS3が一般的に使えるようになると、便利ですね～

[rkpg]

参考になりました！！RT:

[purpleEye]

おもしろい！やってみたい！ただ、どう活かすかわかんないけど、ブログのフォーマットとかに使っていいのかな？？

[bcoffee]

css3

[yokkong]

CSS3のサンプル

[feb223]

ブクマ。：css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた →

[lordkf]

ほおおー、CSSのみでアニメーションも出来るのか（2010現在、Safariなら動く）。

[kadokurarara]

　お遊び。

[chi-bit]

CSS3で簡単なアニメーション。テキストに動きを付けたり、ボックスに動きを付けたり。

[gonta02]

css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた

[sevenstars000]

動くよ

[site159]

トランジションサンプル

[silverscythe]

面白い面白い。ちょっとしたメニューとかになら使えるかなー。‥‥4年後くらいに。

[same3]

おもろー

[invent]

css3がすげーわかりやすい。

[microgravity]

marquee3.0!!

[rosylilly]

面白いしサンプルとしてこういう物があるというのがざっと理解できるのは素敵

[Layzie]

分かりやすいなー。しかし、これだけ見ると何というか装飾全盛期のwebを思い出すな…