CSS3のTransformsで色々アニメーションできるので、無駄なスクリプトはいらな(ry
Transforms can be animated in a variety of CSS3
どうすか？
回っちゃってますか？
今回設定したCSSはこんな感じです。
/*◆◆◆◆◆◆◆◆◆アイコン回転◆◆◆◆◆◆◆◆◆◆◆*/
div.spinning_icons a{
width:32px;
height:32px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
margin-left:10px;
float:left;
/*アニメーションさせながら元に戻す*/
transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
}
/*===============<a>タグをアニメーションさせる==========*/
div.spinning_icons a:hover{
transform: rotate(750deg) scale(1.5);
-webkit-transform: rotate(750deg) scale(1.5);
-moz-transform: rotate(750deg) scale(1.5);
-ms-transform: rotate(750deg) scale(1.5);
/* アニメーションの秒数を設定 */
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -moz-transform 1s ease-out;
}
/*===============アイコン画像==============*/
.twitter{ background:url('http://webmage.pro/blog_img/icons/twitter_32.png'); }
.delicious{ background:url('http://webmage.pro/blog_img/icons/delicious_32.png'); }
.digg{ background:url('http://webmage.pro/blog_img/icons/digg_32.png'); }
.dribbble{ background:url('http://webmage.pro/blog_img/icons/dribbble_32.png'); }
.email{ background:url('http://webmage.pro/blog_img/icons/email_32.png'); }
.facebook{ background:url('http://webmage.pro/blog_img/icons/facebook_32.png'); }
.flickr{ background:url('http://webmage.pro/blog_img/icons/flickr_32.png'); }
.foursquare{ background:url('http://webmage.pro/blog_img/icons/foursquare_32.png'); }
.linkedin{ background:url('http://webmage.pro/blog_img/icons/linkedin_32.png'); }
.rss{ background:url('http://webmage.pro/blog_img/icons/rss_32.png'); }
.stumbleupon{ background:url('http://webmage.pro/blog_img/icons/stumbleupon_32.png'); }
.youtube{ background:url('http://webmage.pro/blog_img/icons/youtube_32.png'); }
あとは、ページ内に
<div class="spinning_icons">
<a href="#" class="twitter" title="twitter">Twitter</a>
<a href="#" class="delicious" title="delicious">Delicious</a>
<a href="#" class="digg" title="digg">Digg</a>
<a href="#" class="dribbble" title="dribbble">Dribbble</a>
<a href="#" class="email" title="email">Email</a>
<a href="#" class="facebook" title="facebook">Facebook</a>
<a href="#" class="flickr" title="flickr">Flickr</a>
<a href="#" class="foursquare" title="foursquare">Foursquare</a>
<a href="#" class="linkedin" title="linkedin">Linkedin</a>
<a href="#" class="rss" title="rss">RSS</a>
<a href="#" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
<a href="#" class="youtube" title="youtube">YouTube</a>
</div>
こんな感じでタグを記述しているだけです。
いろいろ書いてあるように見えますが、ほとんどサイズ云々の設定がしてあるので、実際のアニメーションはこの部分で設定されてます。
▼
div.spinning_icons a:hover{
transform: rotate(750deg) scale(1.5);
-webkit-transform: rotate(750deg) scale(1.5);
-moz-transform: rotate(750deg) scale(1.5);
-ms-transform: rotate(750deg) scale(1.5);
/* アニメーションの秒数を設定 */
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -moz-transform 1s ease-out;
}
transform: rotate(750deg) scale(1.5);
▲ ▲
750°回転 1.5倍に拡大
transition: transform 1s ease-out;
▲
transformの部分を１秒でease-outする
という…。
簡単な設定です。
「-webkit-…」とか「-moz-」とか書いてあるのは、まだW3Cで正式に仕様が固まってないからで、いずれは
transform: rotate(750deg) scale(1.5);
transition: transform 1s ease-out;
って２行書くだけでよくなるみたいです。
うーん…簡単ですね。
ちなみに、transformのプロパティは
transform-origin → transformの支点を設定
rotate → 回転
translate → 移動
scale → 拡大／縮小
skew → X軸，Y軸へのゆがみ
backface-visibility → 要素の裏側の可視，不可視
perspective → 奥行き
perspective-origin → 奥行きの支点
transform-style → 2D（flat）と3Dの指定
とゆー感じで色々あります。
プロパティがいろいろあるし、見ながらじゃないとわからないよ…('A`)
って人は、こちらへどうぞ。
http://westciv.com/tools/transforms/index.html
かなり捗りますぞ。
でも、「translate → 移動」ってあまり使わないんじゃないかと思うんですよね。
ホバー前とホバー後の位置を変えるだけで、「transition: all 1s …」ってやればアニメーションするし。
ホバーアクション以外にアニメーション使うことってなかなか無いんですが…。