LogoMark.png

CSS/Animation

CSS Animation

 

はじめに

CSSアニメーションはCSS3の規格で、スマートフォンを含む多くのブラウザがそれに対応したことで、活用事例が増えています。それなりにコード量は増えますが、JavaScript(jQuery)なしで動きが実現できるのが大きな魅力です。
事例はFirefoxとChromeでのみ動作確認しています(古い環境では動きません)。


文法

CSSでアニメーションを実現するには、位置・回転・拡大縮小について「どういう状態であるか」を定義する transform と、時間的に「どのように変化するか」あるいは「どのように動くか」を定義する transitionanimation、計3つのプロパティーがあります。以下、順に概説します。

transform:状態(位置・回転、拡大縮小)の定義

transition:状態の遷移


animation:アニメーション




参考

ナビゲーション等にアニメーションを適用する事例は、Web上にたくさん紹介されています。以下、リンクをご覧ください。

PAGES

GUIDE

DATA

添付ファイル: fileCSS_Animation02.zip 101件 [詳細]
Last-modified: 2019-07-05 (金) 20:51:11