LogoMark.png

CSS/Animation の変更点


#author("2021-05-06T18:32:03+09:00;2021-05-06T18:31:50+09:00","default:inoue.ko","inoue.ko")
#author("2021-05-06T18:32:13+09:00;2021-05-06T18:32:03+09:00","default:inoue.ko","inoue.ko")
*CSS Animation
 
~

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

//以下、CSSアニメーションでできること・・を知っていただくための事例です。ブラウザの「ページのソースを開く」からHTMLのコード、また <head>のリンクから CSSのコードをご確認ください。
//&color(red){事例はFirefoxとChromeでのみ動作確認しています(古い環境では動きません)。};

CSSでアニメーションを実現するには、位置・回転・拡大縮小について「どういう状態であるか」を定義する ''transform'' と、時間的に「どのように変化するか」あるいは「どのように動くか」を定義する ''transition'' と ''animation''、計3つのプロパティーがあります。以下、順に概説します。
//&color(red){事例はすべて標準的な記述のみです。ブラウザによっては、[[ベンダープレフィックス>Google:ベンダープレフィックス CSS]]が必要になる場合があります。};
~
~

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

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

***プロパティー
-移動(translate, translate3d, translateX, translateY, translateZ)
&color(red){''注意'':transformプロパティーで translate(移動) を利用する場合、''要素は position: absolute; で初期位置が定義されている''ことが前提となります。};
-回転(rotate, rotate3d, rotateX, rotateY, rotateZ)
-拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)
-スキュー(skew, skewX, skewY)
-マトリクス処理(matrix, matrix3d)
-透視投影(perspective)
~

***transformを単なる状態定義に用いた事例
BOXが45度傾いて表示されます。
-HTML
 <div class="box"></div>
-CSS
 .box {
   width: 100px;
   height: 100px;
   background: black;
   transform: rotate(-45deg);
 }
~
~

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

-プロパティー
--transition-property アニメーションを適用する対象プロパティ
--transition-duration 開始から終了までの所要時間
--transition-delay アニメーションが開始するまでの遅延時間 
--transition-timing-function イージングを指定
--transition ショートハンド(上記4つをまとめて指定できます)

-一般にCSSには、「常態」と :hover をセットで記述します。transition すなわち「どう遷移するか」の情報は、常態側に記述します。
~

***transitionを用いた事例1|マウスホバーで変形
マウスホバーで「100x100の黒い正方形が、2秒かけて幅500pxのグレーの長方形に変化する」という事例の要点のみを記述した例です。
 
-HTML
 <div class="box"></div>
-CSS
 .box {
   width: 100px;
   height: 100px;
   background: black;
   transition: all 200ms 0s ease;  
 }
 .box: hover {
   background: gray;
   width: 500px;
 }

~

***transitionを用いた事例2|マウスホバーで要素にアクション
各要素に個別にクラスを定義しただけのシンプルな事例集です。CSSは必要な部分のみカットして使えます。

-DEMO:https://koichi-inoue.github.io/CSS_Animation01/
-CODE:https://github.com/koichi-inoue/CSS_Animation01


~
~

**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-name 要素に適用するキーフレームアニメーションを指定
-animation-duration 開始から終了までの所要時間
-animation-timing-function イージングを指定( ease / linear)
-animation-delay アニメーションが開始するまでの遅延時間
-animation-iteration-count アニメーションのループ回数
-animation-direction アニメーションの再生方向
-animation-fill-mode キーフレーム指定プロパティの適用法
-animation-play-state アニメーションの再生と一時停止
-animation ショートハンド(上記をまとめて指定できます)

''記述例'':
 animation: pattern01  5s ; 
この例は、@keyframesにおいて ''pattern01'' として定義された動きを、5秒で動かすことを意味します。
~

***animationを用いた事例1
Hello World! がじわっと出ます。animation-name を ''fade'' にしています。

-DEMO:https://koichi-inoue.github.io/CSS_Animation00/
-CODE:https://github.com/koichi-inoue/CSS_Animation00
 
-HTML
 <h1>Hello World!</h1>

-CSS
 h1{
   text-align: center;
   animation: fade 5s ease;
 }
 @keyframes fade {
   0% { color: #3399FF; }   /* 背景色と同じ色(背景に埋もれます) */
   100% { color: #FFFFFF; }  /* 白 */
 }

~

***animationを用いた事例2
回転しながら、背景色が赤→緑→青と変化します。
 
-HTML
 <div class="box"></div>

-CSS
 .box {
   width: 100px;
   height: 100px;
   background: red;
   animation: rotation 3s ease 0s infinite alternate none running;
 }
 
 @keyframes rotation {
   0% {
     transform: scale(.3);
     background: red;
   }
   50% {
     transform: scale(.6) rotate(-45deg);
     background: green;
   }
   100% {
     transform: scale(1) rotate(180deg);
     background: blue;
   }
 }
~

***animationを用いた事例3
オープニングアニメーションの例
-DEMO:https://koichi-inoue.github.io/CSS_Animation02/
-CODE:https://github.com/koichi-inoue/CSS_Animation02
 
既存のサイトに付け足す形で利用できるように、アニメーション要素のみのページにしています。「数秒のアニメーション、その後 [ ENTER ] で本編にジャンプ」という前提のページです。

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

~
~

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

-DEMO:https://koichi-inoue.github.io/CSS_AnimateCSS/
-CODE:https://github.com/koichi-inoue/CSS_AnimateCSS
~
~

**参考
ナビゲーション等にアニメーションを適用する事例は、Web上にたくさん紹介されています。以下、リンクをご覧ください。
-Animate.css - Just-add-water CSS animations
https://animate.style/
-Hover.css - A collection of CSS3 powered hover effects
https://ianlunn.github.io/Hover/
-CSSアニメーション入門 qiita.com
http://qiita.com/soarflat/items/4a302e0cafa21477707f
-ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を再現
https://cssanimation.rocks/jp/principles/
-[[スターウォーズ風のオープニング(数行で簡単)>http://coliss.com/articles/build-websites/operation/css/css3-tutorial-starwars-scrolling-text.html]]
~
~