• GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie
  • 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

    1回の「ひげ剃り」で、カミソリで何回剃っているか知ってる? ジレットの「肌を守る」新しいカミソリを体験してきた

    Sponsored

    1回の「ひげ剃り」で、カミソリで何回剃っているか知ってる? ジレットの「肌を守る」新しいカミソリを体験してきた

    1回の「ひげ剃り」で、カミソリで何回剃っているか知ってる? ジレットの「肌を守る」新しいカミソリを体験してきた

    毎日のひげ剃りは、多くの社会人男性にとって大切なマナーのひとつです。そして、いつの時代も変わらない悩みとして言われるのが「カミソリ負け」。 T字型カミソリの世界シェアNO.1を誇るジレットは、その大きな要因のひとつが「リストローク(肌の同じ場所を2度以上剃ること)」であると考え、4年間の研究開発の末、肌を守る新機能を搭載した新製品「ジレット フュージョン5+1 プロシールド」を発売することになり  11:00 AM

MORE FROM LIFEHACKER

powered by

Kotaku

Recommended

© mediagene Inc.