LogoMark.png

CSS/Animation

CSS Animation


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

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



transform

transform は要素の状態(位置・回転、拡大縮小)を定義するプロパティーで、後述する transitionの開始・終了時の状態や、@keyframes の個々のタイミングにおける変形処理を定義します。2Dと3Dがあります。

transition や animation の使用に際して記述するものですが、例えば、アイコンを傾けて表示したい場合などは、これだけの記述でも機能します。

プロパティー

transformを単なる状態定義に用いた事例

BOXが45度傾いて表示されます。

transition

transition(状態の変化)は、CSSプロパティが変化する際のアニメーションを定義します。典型的なのは :hover によってCSSプロパティーが変化する場合です。よって一般に、:hover によって変化する対象のセレクタに対して、このプロパティーを適用します。実際に動くのは :hover したときです。

transitionを用いた事例1|マウスホバーで変形

マウスホバーで「100x100の黒い正方形が、2秒かけて幅500pxのグレーの長方形に変化する」という事例の要点のみを記述した例です。
 


transitionを用いた事例2|マウスホバーで要素にアクション

各要素に個別にクラスを定義しただけのシンプルな事例集です。CSSは必要な部分のみカットして使えます。




animation

animation@keyframes とセットで使います。具体的な動きのパターンを @keyframes [ animation-name ]{・・} に定義したうえで、animation プロパティに、使用する animation-name、所要時間、開始までの遅延、イージング、ループ回数などの値を定義します。

@keyframes の書き方

@keyframes [ animation-name ] { /* プロパティー */ }; 

記述例1 単純遷移(白から黒へ)

@keyframes pattern01 {
  0% { color: #FFFFFF; }
  100% { color: #000000; }
}

記述例2 from to の利用

@keyframes pattern02 {
  from { transform: rotate(0deg); }
  to    { transform: rotate(180deg); }
}

記述例2 パーセンテージの列挙

@keyframes pattern03 {
  0%     { transform: rotate(0deg);  }
  30%    { transform: rotate(180deg);  }
  80%    { transform: rotate(-180deg);  }
  100%   { transform: rotate(0deg); }
}


amimationプロパティーの書き方

animation: animation-name animation-duration animation-timing-function
                  animation-delay animation-iteration-count animation-direction
                  animation-fill-mode animation-play-state;

記述例

animation: pattern01  5s ; 

この例は、@keyframesにおいて pattern01 として定義された動きを、5秒で動かすことを意味します。

animationを用いた事例1

Hello World! がじわっと出ます。animation-name を fade にしています。


animationを用いた事例2

回転しながら、背景色が赤→緑→青と変化します。
 

animationを用いた事例3

オープニングアニメーションの例

CSSアニメーションのイベントを取得することも可能なので、JavaScriptが扱える方であれば「特定要素のアニメーション終了と同時に自動で本編表示」という動きも可能です(参考記事>Quiita)。




ライブラリの活用

Animate.css を利用した事例を紹介します。スクロールすると要素が動きながら登場する・・というよくある演出の事例です。

参考

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

PAGES

GUIDE

TOOL

DATA

添付ファイル: fileCSS_Animation02.zip 183件 [詳細]
Last-modified: 2021-05-06 (木) 18:32:13