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

• Newer
• Older

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

• 2009-03-11 (水)
• 技術
• 

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

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

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

translate、scale、rotateの合わせ技

<style> <!-- .all { width: 500px; height: 100px; -webkit-box-shadow: black 2px 2px 5px; -webkit-border-radius: 1em; -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: 50% 50%; } .all:hover { -webkit-transform: translate(500px, 500px) scale(1.8) rotate(1080deg); } --> </style> <div class="all"> <img src="http://hisasann.com/housetect/img/Housetect.png" width="500px" height="100px"> </div>

透過

<style> <!-- .opacity { width: 500px; height: 100px; opacity: 1; -webkit-box-shadow: black 2px 2px 5px; -webkit-border-radius: 1em; -webkit-transition: opacity 1s linear; -webkit-transform-origin: 50% 50%; } .opacity:hover { opacity: 0; } --> </style> <div class="opacity"> <img src="http://hisasann.com/housetect/img/Housetect.png" width="500px" height="100px"> </div>

クリックで回転

<style> <!-- .rotate { width: 500px; height: 100px; -webkit-box-shadow: black 2px 2px 5px; -webkit-border-radius: 1em; -webkit-transform-origin: 50% 50%; -webkit-transition: -webkit-transform 2s ease-in } .rotate:hover { } --> </style> <div class="rotate" onclick="this.style.webkitTransform='rotate(360deg)'"> <img src="http://hisasann.com/housetect/img/Housetect.png" width="500px" height="100px"> </div>

ボーダー伸び縮み

<style> <!-- .border { width: 500px; height: 100px; -webkit-box-shadow: black 2px 2px 5px; -webkit-border-radius: 1em; -webkit-transform-origin: 50% 50%; -webkit-transition: all 2s ease-in } .border:hover { } --> </style> <div class="border" onmouseover="this.style.border='20px solid blue'" onmouseout="this.style.border='0px solid'"> <img src="http://hisasann.com/housetect/img/Housetect.png" width="500px" height="100px"> </div>

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

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

• Newer: JavaScriptで関数内のthisを文字列にする方法
• Older: Twitterがクリックジャッキングを防止している方法

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Name

Mail address

URI

Remember personal info

Yes No

Comment スタイル指定用の一部の HTMLタグが使用できます

Add Your Comment

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 Blog

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

RSS Feeds

Search

HouseTect, JavaScript Blog内の検索

Recent Entries

• エラトステネスの篩 - JavaScript版
• JavaScriptライブラリを使っていてIEで余計なリクエストが発生してしまうケース
• JavaScript遅延ロード - jLazyLoader
• eclipseの起動画面を変えて楽しむ方法
• Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた
• Viva 2010!! Happy New Year JavaScripters
• VMware fusion内のWindowsからMacにSSHでログインする方法
• XCodeでWebkitをデバッグする方法
• TumblrからランダムにURLを取得してTwitterにPostするbotを作ってみた
• jQuery Plugin - 僕のmakeClass

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！



他に運営しているブログ：

• DigitalGrounder.COM
• NoTechnoNoLife

利用しているWebサービス :

• hisasann@はてブ
• hisasann@Twitter
• hisasann@Mixi
• hisasann@Flickr

Tag cloud

ActionScript addon Ads Ajax Algorithm Amazing Anime AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator Google Google Wave Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image Interface iPhone iPod IT Item iTunes Java JavaScript jQuery JsUnit Keyboard Lanch Language LifeHack Mac MacBookPro Mash-up Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News Nikki OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill SMO SNS Spring SQL SSH SSL Struts Test TextMate Tomcat Tool Tumblr Twitter Unix Vista VMware Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XSS XUL Yahoo YouTube YUI

カテゴリー

• Firefox
• Lifehack
• Mac
• News
• Photoshop
• Web
• アイテム
• ガジェット
• ゲーム
• サービス
• デザイン
• ブログ
• 技術
• 映像
• 本
• 画像
• 考え方
• 言葉
• 雑記

月別アーカイブ

月を選択 2010年1月 2009年12月 2009年11月 2009年10月 2009年9月 2009年8月 2009年7月 2009年6月 2009年5月 2009年4月 2009年3月 2009年2月 2009年1月 2008年12月 2008年11月 2008年10月 2008年9月 2008年8月 2008年7月 2008年6月 2008年5月 2008年4月 2008年3月 2008年2月 2008年1月 2007年12月 2007年11月 2007年10月 2007年9月 2007年8月 2007年7月 2007年6月 2007年5月

jQuery Meetup

Visit jQuery Meetups

Powered by

Powered by
Movable Type Commercial 4.261