CSS/Animation をテンプレートにして作成

開始行:
*CSS Animation 　 ~ ***はじめに CSSアニメーションはCSS3の規格で、スマートフォンを含む多く... //以下、CSSアニメーションでできること・・を知っていただく... &color(red){事例はFirefoxとChromeでのみ動作確認しています... ~ **文法 CSSでアニメーションを実現するには、位置・回転・拡大縮小に... //&color(red){事例はすべて標準的な記述のみです。ブラウザ... ~ ***transform：状態（位置・回転、拡大縮小）の定義 -transformは要素の状態を定義するプロパティーで、後述する ... 　transition や animation の使用に際して記述するものです... -プロパティー --移動(translate, translate3d, translateX, translateY, tr... &color(red){''注意''：transformプロパティーで translate（... --回転(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プロパティが変化する際のアニメーション... -プロパティー --transition-property　アニメーションを適用する対象プロパ... --transition-duration　開始から終了までの所要時間 --transition-delay　アニメーションが開始するまでの遅延時... --transition-timing-function　イージングを指定 --transition　ショートハンド（上記４つをまとめて指定でき... -一般にCSSには、「常態」と :hover をセットで記述します。t... -''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を用いた事例２''　マウスホバーで要素にアクシ... DEMO：https://koichi-inoue.github.io/CSS_Animation01/ DL：https://github.com/koichi-inoue/CSS_Animation01 各要素に個別にクラスを定義しただけのシンプルな事例集。CSS... ~ ~ ***animation：アニメーション -''animation'' は ''@keyframes'' とセットで使います。''具... -amimationプロパティーの書き方 animation: animation-name animation-duration animation-t... animation-delay animation-iteration-co... animation-fill-mode animation-play-sta... 記述例 animation: pattern01 5s ;　 この例は（ @keyframesにおいて）''pattern01'' として定義さ... -amimationプロパティーに指定できる様々な値 --animation-name　要素に適用するキーフレームアニメーショ... --animation-duration　開始から終了までの所要時間 --animation-timing-function　イージングを指定（ ease / li... --animation-delay　アニメーションが開始するまでの遅延時間 --animation-iteration-count　アニメーションのループ回数 --animation-direction　アニメーションの再生方向 --animation-fill-mode　キーフレーム指定プロパティの適用法 --animation-play-state　アニメーションの再生と一時停止 --animation　ショートハンド（上記をまとめて指定できます） -@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); } } ~ -''animationを用いた事例１'' Hello World! がじわっと出ます。animation-name を ''fade''... DEMO>https://koichi-inoue.github.io/CSS_Animation00/ DL：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... } @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/ DL：https://github.com/koichi-inoue/CSS_Animation02 　 既存のサイトに付け足す形で利用できるように、アニメーショ... 　CSSアニメーションのイベントを取得することも可能なので、... ~ ***参考 ナビゲーション等にアニメーションを適用する事例は、Web上に... -Hover.css - A collection of CSS3 powered hover effects http://ianlunn.github.io/Hover/ -CSSアニメーション入門 qiita.com http://qiita.com/soarflat/items/4a302e0cafa21477707f -ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原... https://cssanimation.rocks/jp/principles/ -[[スターウォーズ風のオープニング(数行で簡単)>http://coli... ~ ~

終了行:
*CSS Animation 　 ~ ***はじめに CSSアニメーションはCSS3の規格で、スマートフォンを含む多く... //以下、CSSアニメーションでできること・・を知っていただく... &color(red){事例はFirefoxとChromeでのみ動作確認しています... ~ **文法 CSSでアニメーションを実現するには、位置・回転・拡大縮小に... //&color(red){事例はすべて標準的な記述のみです。ブラウザ... ~ ***transform：状態（位置・回転、拡大縮小）の定義 -transformは要素の状態を定義するプロパティーで、後述する ... 　transition や animation の使用に際して記述するものです... -プロパティー --移動(translate, translate3d, translateX, translateY, tr... &color(red){''注意''：transformプロパティーで translate（... --回転(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プロパティが変化する際のアニメーション... -プロパティー --transition-property　アニメーションを適用する対象プロパ... --transition-duration　開始から終了までの所要時間 --transition-delay　アニメーションが開始するまでの遅延時... --transition-timing-function　イージングを指定 --transition　ショートハンド（上記４つをまとめて指定でき... -一般にCSSには、「常態」と :hover をセットで記述します。t... -''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を用いた事例２''　マウスホバーで要素にアクシ... DEMO：https://koichi-inoue.github.io/CSS_Animation01/ DL：https://github.com/koichi-inoue/CSS_Animation01 各要素に個別にクラスを定義しただけのシンプルな事例集。CSS... ~ ~ ***animation：アニメーション -''animation'' は ''@keyframes'' とセットで使います。''具... -amimationプロパティーの書き方 animation: animation-name animation-duration animation-t... animation-delay animation-iteration-co... animation-fill-mode animation-play-sta... 記述例 animation: pattern01 5s ;　 この例は（ @keyframesにおいて）''pattern01'' として定義さ... -amimationプロパティーに指定できる様々な値 --animation-name　要素に適用するキーフレームアニメーショ... --animation-duration　開始から終了までの所要時間 --animation-timing-function　イージングを指定（ ease / li... --animation-delay　アニメーションが開始するまでの遅延時間 --animation-iteration-count　アニメーションのループ回数 --animation-direction　アニメーションの再生方向 --animation-fill-mode　キーフレーム指定プロパティの適用法 --animation-play-state　アニメーションの再生と一時停止 --animation　ショートハンド（上記をまとめて指定できます） -@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); } } ~ -''animationを用いた事例１'' Hello World! がじわっと出ます。animation-name を ''fade''... DEMO>https://koichi-inoue.github.io/CSS_Animation00/ DL：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... } @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/ DL：https://github.com/koichi-inoue/CSS_Animation02 　 既存のサイトに付け足す形で利用できるように、アニメーショ... 　CSSアニメーションのイベントを取得することも可能なので、... ~ ***参考 ナビゲーション等にアニメーションを適用する事例は、Web上に... -Hover.css - A collection of CSS3 powered hover effects http://ianlunn.github.io/Hover/ -CSSアニメーション入門 qiita.com http://qiita.com/soarflat/items/4a302e0cafa21477707f -ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原... https://cssanimation.rocks/jp/principles/ -[[スターウォーズ風のオープニング(数行で簡単)>http://coli... ~ ~

ページ名: