k_kinukawa's diary

2010-12-13

Hatena Developer Centerの-webkit-animation

webkit

Hatena Developer Center
hoge Developer Center大杉、なんて思っていたら、上部の歯車が回っていることに気がついた。
最初はJavascriptかなーと思って調べていたら、どうやら違うみたい。
webkitにはCSSでアニメーションさせる機能が付いていて、それでやっているらしい。
たしかに、Chromeでは動くけどFirefoxでは動かない!
こんなのも、CSSでやっているんだって。
base.cssの、

#header-container #gear-1 {
  top:104px;
  right:293px;
 -webkit-animation: gearRollR 20s infinite linear;
}

この20sを小さくしたら回転が速くなった。
おしゃれ。

2010-12-13 23:27

コメントを書く
プロフィール
id:k_kinukawa id:k_kinukawa

購読中です 読者をやめる 読者になる 読者になる
ともだち ともだち申請
検索
リンク
  • ヘルプ
  • はてなブログ
  • お知らせ
最新記事
  • E 50mm F1.8 OSSを買った
  • 春風亭昇太さんの言葉
  • 駒ケ岳ロープウェイ
  • WWDCチケット販売を見張る
  • 未踏的な人・僕の今年の未踏
月別アーカイブ
  • 2012 / 6 (1)
  • 2012 / 5 (2)
  • 2012 / 4 (2)
  • 2012 / 3 (4)
  • 2012 / 2 (12)
  • 2012 / 1 (3)
  • 2011 / 12 (3)
  • 2011 / 11 (17)
  • 2011 / 10 (5)
  • 2011 / 8 (2)
  • 2011 / 7 (13)
  • 2011 / 6 (3)
  • 2011 / 5 (6)
  • 2011 / 4 (10)
  • 2011 / 3 (9)
  • 2011 / 1 (1)
  • 2010 / 12 (4)
  • 2010 / 11 (2)
  • 2010 / 10 (3)
  • 2010 / 9 (4)
  • 2010 / 8 (12)
  • 2010 / 7 (15)
  • 2010 / 6 (25)
  • 2010 / 5 (25)
  • 2010 / 4 (10)
k_kinukawa

Hatena Blog / Hatena::Diary