Home > 技術 > -webkit-transformを使ったCSSアニメーションを試してみた

-webkit-transformを使ったCSSアニメーションを試してみた

Safari3.1以上で搭載されたCSSプロパティ-webkit-transformいまさらながら試してみた。
ChromeかSafari3.1以上で触ってみてください。

-webkit-transitionでアニメーションさせるCSSプロパティを指定して、例えばhoverでそのCSSプロパティの値を変更すればJavaScriptで実行しているようなアニメーションをしてくれる。

また-webkit-transform-originに50%を渡しているが、これはデフォルト50%なので特に意味はない。

translate、scale、rotateの合わせ技

透過

クリックで回転

ボーダー伸び縮み

※注意:0pxにするときにsolidがないとアニメーションしてくれない。


■関連リンク
Surfin’ Safari - Blog Archive ≫ CSS Animation
Weblog  Safari 3.1でやってみたかった3つの事
The Art of Web ~ CSS: Animation Using CSS Transforms

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1162
Listed below are links to weblogs that reference
-webkit-transformを使ったCSSアニメーションを試してみた from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > -webkit-transformを使ったCSSアニメーションを試してみた

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top