• GIZMODO
  • FUZE
  • BUSINESS INSIDER JAPAN
  • DIGIDAY
  • gene
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • roomie
  • machi-ya
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

カメきち  - ,  12:00 PM

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート

141124_cs.jpg


CSS3 ANIMATION CHEAT SHEET」ではHTMLの要素に滑らかなアニメーションをつけられるCSSが公開されています。CSS3からアニメーションやキーフレームを指定できるようになり、JavaScriptを使わなくてもCSSのみでアニメーションが簡単につけられるようになりました。よく使われそうなアニメーションをひとまとめにしたCSSがダウンロードできます。

以下に使ってみた様子を載せておきます。


まずCSS3 ANIMATION CHEAT SHEETへアクセスしましょう。トップにおじさんの絵がありますが、サンプルの動きに使われます。


141124_cs2.jpg


アニメーション例はたくさんあります。よく使われるスライドイン・アウトを始め、拡大縮小やバウンドもありますよ。それぞれの項目をクリックすると、おじさんの絵が実際に動いて動作の確認ができます。


141124_cs3.jpg


使い方は簡単で、配布されているCSSをダウンロードして読み込み、アニメーションをつけたい要素にclassを振るだけです。JavaScriptを使えば、クリックしたときやスクロールしたときにアニメーションを付加することが可能になります。

CSS3で要素にアニメーションを付けたいときにぜひご活用ください。


CSS3 ANIMATION CHEAT SHEET

(カメきち)
 

  • ,,,,,,, - By

    庄司真美

    LIKE

    ビジネスや人間関係を広げるチャンスに? 「Airbnb」のホストになることで得られる、お金以外のもの

    Sponsored

    ビジネスや人間関係を広げるチャンスに? 「Airbnb」のホストになることで得られる、お金以外のもの

    ビジネスや人間関係を広げるチャンスに? 「Airbnb」のホストになることで得られる、お金以外のもの

    世界的に知名度の高い宿泊予約のマーケットプレイスといえば、「Airbnb(エアビーアンドビー)」。2008年に誕生して以来、世界各国に広がり、現在は世界191カ国、3万4000以上の都市で利用されています。 そして今あらためて、空き部屋などを有効利用する手段や新たなビジネスのかたちとして、「Airbnbのホスト」に注目が集まっています。 物件の管理や接客の仕方、また、お部屋のコーディネイトなど、  10:00 PM

2017年注目のライフハックツール

MORE FROM LIFEHACKER

powered by
    
    
    
  

lifehacker

Recommended

© mediagene Inc.