CSS3のAnimationsで遊んでみた
CSS3 Animations；アニメーション - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
これを見てたら面白そうだったから使ってみようと思ったけど、あんまり使い道が思い浮かばない。
とりあえずはてなキーワードのhoverをホバーさせてみた。FirefoxとかWebkitで、そのへんのキーワードにカーソル当てるとなめらかに動くはず。カクッと動いちゃったら非対応。
a.keyword:hover {
-moz-animation-duration: .2s;
-moz-animation-name: test1;
-moz-animation-iteration-count: 1;-ms-animation-duration: .2s;
-ms-animation-name: test1;
-ms-animation-iteration-count: 1;-o-animation-duration: .2s; /* reserved Opera */
-o-animation-name: test1;
-o-animation-iteration-count: 1;-webkit-animation-duration: .2s;
-webkit-animation-name: test1;
-webkit-animation-iteration-count: 1;text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
position:relative;
}@-moz-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-ms-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-o-keyframes test1 { /* reserved Opera */
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}@-webkit-keyframes test1 {
from { text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
}
to { text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
}
検証環境はChromeだけ、他は知らない。
リンク元のは無限ループにしてるけど、正直うざいから1回限りに。デフォルト1回だからanimation-iteration-countはいらなかったかも。
アニメーションが終了すると、toとか100%の形で止まるんじゃなくて、アニメーションじゃないCSSで終わるみたい。だからtoと従来のやつにCSSが合ってないと気持ち悪い。
なんだか一時期流行ったウザいJavascriptの臭いがする。カーソルオーバーとか、ちょこっとしたところに仕込むときれいかも。
20111108追記
もんどさんから
その用途なら、transitionsを使ったほうが幸せかも。
http://twitter.com/#!/momdo_/status/133907941198807041
とのことだったからテスト。←の「テスト」だけ↓のスタイルシート。
transitionsだと戻るときもアニメ、アニメ中にカーソルオーバー切り替えてもそこから追随してくれる。表記が冗長にならない。アニメーションについての記述がアニメする状態じゃなくて、変化前、変化後に分けて記述する必要がある。
はてなキーワードのhoverをホバーさせてみるので言うと、マウスアウトで影なし、マウスオーバー直後で文字と影が一致、アニメ終了時に影がボケっていう3段階にこだわらなければtransitionsがばっちり。
transitionsのほうが適当に使うとそれっぽくなりそう。animationのほうがこだわれそう。
a.keyword {
position:relative;
text-shadow:0px 0px 0px #000000;
left:0px;
top:0px;
-moz-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-ms-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-o-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
-webkit-transition: text-shadow .2s linear, left .2s linear, top .2s linear;
}
a.keyword:hover {
text-shadow:3px 3px 2px #000000;
left:-3px;
top:-3px;
}
