前々回までのtransitionプロパティは、動機付けが必要なアニメーションという事でしたが、
このCSS Animationは始まるタイミングや繰り返し数を指定し、変化の仕方を決めてあげる事で、勝手に動き出します。
イメージは、前回のブログに記載した通り、
1コマ1コマの静止画を指定してあげる。
パラパラ漫画の1枚を描いてあげる。
って所です。
そうすれば、あとはCSSさんの方で勝手にそのコマまでのアニメーションを補完してくれます。
アウトプット
http://sysgole.web.fc2.com/index.html
ロゴ・右側の下から2つの<div>に使ってみました。
<CSS Animation>
◎animation
[特徴・使用上の注意]
1. 要素にキーフレームアニメーションを適用する。
2. 親要素から子要素へのスタイルの継承(値の継承)は無い。※1
3. 2017/5/4時点でWDの為※2、ベンダープレフィックスを利用する。※3
4. 6つのプロパティを組み合わせて指定できる。省略すると、初期値が利用される。
5. ()内の数値はカンマ区切りで記載する。
6. @keyframesで実際のキーフレームでの要素の状態を指定する。
7. すべての要素のほかに:before疑似要素、:after疑似要素※4にも適用可能
☆animation: ● ■ ▲ 〇 □ △;
[プロパティ値]
●animation-name ・・・アニメーション名。
■animation-duration ・・・変化にかかる時間。
▲animation-timing-function ・・・変化のタイミング。
〇animation-delay ・・・変化がいつ始まるかを指定する。
□animation-iteration-count ・・・繰り返し回数
△animation-direction ・・・反転再生させるか。
●animation-name
[特徴・使用上の注意]
1. @keyframesでキーフレームを定義する必要がある。
2. カンマ区切りでアニメーション名のリストを指定する事ができる。(複数指定できる?)
3. 開始(0%)～終了(100%)までの状態を指定できる。
4. 初期値はnoneで、アニメーションは実行されない。
■animation-duration
これは、transition-durationで学んだ内容と同様の為、割愛。
1s(1秒)・1m(1分)・1h(1時間)等で指定する。
▲animation-timing-function
これは、transition-timing-functionで学んだ内容と同様の為、割愛。
[プロパティ値]
ease ・・・開始・終了を滑らかに変化する。
linear ・・・一定速度で変化する。
ease-in ・・・開始だけゆっくり変化する。
ease-out ・・・終了だけゆっくり変化する。
ease-in-out ・・・開始と終了をゆっくりにする。
〇animation-delay
これは、transition-delayで学んだ内容と同様の為、割愛。
1s(1秒)・1m(1分)・1h(1時間)等で指定する。
□animation-iteration-count
[特徴・使用上の注意]
1. 初期値は1で、アニメーションは1回繰り返される。
2. 値にinfiniteを指定すると、アニメーションの再生を無限に繰り返される。
△animation-direction
[プロパティ値]
△normal ・・・通常の方向にアニメーションを繰り返す。★初期値
△alternate ・・・奇数回は通常の方向、偶数回は逆方向になる＝アニメーションが反転する
◎@keyframes
これで、パラパラ漫画の1枚1枚の状態を指定してあげます。
[例]
@keyframes ● {
0% {background-color: 値;}
100% {background-color: 値;}
}
あぁ、やっぱり一つ勉強して基礎情報を持っていると
捗り方が違うなぁと。
あのプロパティで言うアレでしょ？
があるだけで全然入って来るスピードが違います。
とりあえず、ひとしきりCSS Animationは遊びました。
他のプログラミングでもそうなんでしょうね。
次回の勉強はどうしましょうか…。
JavaScript行っちゃう前にCSSだけで出来そうな事、出来なさそうなこと
勉強してみましょうかね…。
<インプット情報(過去のアウトプット結果)>
ゆる～～く理解するウェブページの仕組み～HTMLとCSSって？～
ゆる～～く理解するウェブページの仕組み～HTMLの要素・タグ・属性??～
ゆる～～く理解するウェブページの仕組み～CSSのセレクタ?プロパティ?値?～
ゆる～～く理解するウェブページの仕組み～CSSを正しく使うためのメモ～
ゆる～～く理解するウェブページの仕組み～ベンダープレフィックス～