CSS/Animation
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2021
ソーシャルデザイン演習/2021
情報デザイン論/2021
Webデザイン演習/2021
情報デザイン演習IIA/2021
情報デザイン研究I/2021
卒業研究I,II
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*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 ショートハンド(上記4つをまとめて指定でき...
-一般にCSSには、「常態」と :hover をセットで記述します。t...
-''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'' マウスホバーで要素にアクシ...
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 ] { /* プロパティー */ };
記述例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); }
}
~
-''animationを用いた事例1''
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を用いた事例2''
回転しながら、背景色が赤→緑→青と変化します。
--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を用いた事例3''
オープニングアニメーションの例
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 ショートハンド(上記4つをまとめて指定でき...
-一般にCSSには、「常態」と :hover をセットで記述します。t...
-''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'' マウスホバーで要素にアクシ...
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 ] { /* プロパティー */ };
記述例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); }
}
~
-''animationを用いた事例1''
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を用いた事例2''
回転しながら、背景色が赤→緑→青と変化します。
--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を用いた事例3''
オープニングアニメーションの例
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...
~
~
ページ名: