#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''、計３つのプロパティーがあります。以下、順に概説します。 //&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 ショートハンド（上記４つをまとめて指定できます） -一般にCSSには、「常態」と :hover をセットで記述します。transition すなわち「どう遷移するか」の情報は、常態側に記述します。 ~ ***transitionを用いた事例１｜マウスホバーで変形 マウスホバーで「100x100の黒い正方形が、２秒かけて幅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を用いた事例２｜マウスホバーで要素にアクション 各要素に個別にクラスを定義しただけのシンプルな事例集です。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 ] { /* プロパティー */ }; 記述例１ 単純遷移（白から黒へ） @keyframes pattern01 { 0% { color: #FFFFFF; } 100% { color: #000000; } } 記述例２ from to の利用 @keyframes pattern02 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } 記述例２ パーセンテージの列挙 @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を用いた事例１ 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を用いた事例２ 回転しながら、背景色が赤→緑→青と変化します。 -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を用いた事例３ オープニングアニメーションの例 -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]] ~ ~