ども、六崎です。
2週間ぶりの登場ですね(　･`ω･´)ｷﾘｯ

 

インフルになったとか、胃腸炎だったとか…そんなことはありません。
ここ数年、この時期はインフルだー！胃腸炎だー！蓄膿症だー！（熱が出て動けなくなる）で
1週間くらい会社を休むのですが…
今年は超元気です！
病気の予防は…入念なうがい＆手洗い、あとR1ヨーグルトを食べるくらいしかしてません。
※我が家ではR1ヨーグルトをタネにヨーグルトメーカーで量産しています！

 

毎日ヨーグルト食べて腸内環境整えたいし、病気予防できるなら一石二鳥じゃん！
しかも甘酒や麹も作れるって、いいね！で購入したヨーグルトメーカー。
お酒飲めないし、麹もあまり得意ではない事に気付いたのはポチったあとですがww

 

アイリスオーヤマヨーグルトメーカー PYG-15-A （通販サイトが開きますよー）

 

 

では、前回に引き続きアニメーションのお話をしていきます。
今回で最終回ですよー！

 

cssでアニメーションをマスターしよう！

• transitionとanimationの違い
• transitionを使ってみよう
• animationを使ってみよう←今回はこれ

 

 

前回は、transitionを使って
カードにカーソルを当てる（hoverをする）と、カードがひっくり返る。
という動作をご紹介しました！

 

同時に、ちょこっと工夫するだけで「それっぽく」なるのも実践しました d(ﾟ∀ﾟ*)ﾈｯ！
詳しくは「cssでアニメーションをマスターしよう！~transitionを使ってみよう~」をご覧ください。

 

 

 

さて、transitionでcssアニメーションの感覚が分かってきたら、次は「animation」を使ってみましょう。
transitionとanimationの違いは何と言っても「タイミングで操作できる」事です！

 

画面内にコンテンツが表示されたら、opacityを0→1にする、かつ動き出して0.5秒経ったら文字色を変えて、0.8秒経ったら90°回転する…
とかとか。

 

transitionだと…まぁ、細かく書けばできないことはないでしょうけどメンドクセェーw
せっかくならスマートに書きましょ！

 

 

animationのプロパティ

animation-name：要素にキーフレームアニメーションを適用する場合に、アニメーション名を指定する。
none：アニメーション効果を指定しない（初期値）
アニメーション名：カンマ（,）区切りでアニメーション名を指定できる

 

ex. animation-name: slide-anime;

 

animation-duration：アニメーションの1回分の時間の長さを指定する。
時間：s（秒）またはms（ミリ秒）で指定
初期値は0s
※1ms = 1/1000sです

 

ex. animation-duration: 2s;

 

animation-timing-function：アニメーションのタイミング・進行割合を指定する。
ease：開始と完了を滑らかにする、cubic-bezier(0.25,0.1, 0.25, 1.0)の動き（初期値）
linear：一定の速さ、cubic-bezier(0.0, 0.0, 1.0, 1.0)の動き
ease-in：ゆっくり始まる、cubic-bezier(0.43, 0, 1.0, 1.0)の動き
ease-out：ゆっくり終わる、cubic-bezier(0, 0, 0.58, 1.0)の動き
ease-in-out：ゆっくり始まってゆっくり終わる、cubic-bezier(0.42, 0, 0.58, 1.0)の動き
cubic-bezier：3次ベジェ曲線のP1とP2を（x1, y1, c2, y3）で指定

 

ex. animation-timing-function: ease-in;
[参考]cubic-bezier.com
↑動きの検証ができます

 

animation-delay：アニメーションがいつ始まるかを指定する。
時間：s（秒）またはms（ミリ秒）で指定
初期値は0s

 

ex.animation-delay: 1s;
1秒後変化させる。

 

animation-iteration-count：アニメーションの繰り返す回数を指定する。
infinite：無限再生
数値：数値分の再生する

 

ex.animation-iteration-count: infinite;
無限再生させる。

 

animation-direction：アニメーションを交互に反転再生されるか否か指定する。
nomal：普通再生する（交互に反転再生しない）
reverse：反転再生する
alternate：交互に反転再生する

 

ex. animation-direction: alternate;
交互に反転再生される。

 

そんでもって、transitionと同様にまとめ書きもOK！

 

animation：animation-nameの値　animation-durationの値　animation-timing-functionの値　animation-delayの値 　animation-iteration-countの値　animation-directionの値
上記の順番で、各プロパティの値をスオエースで区切って指定します。

 

ex. animation: slide 1s ease 0 infinite alternate;

 

そして、animationを使う上で最も重要なモノ。
途中「キーフレームアニメーション」という単語が出て来ましたが…これが素晴らしいのですよ。

 

動画編集やGIFアニメ、過去の遺物で言えばFlashとかとか…その辺をやっている人なら、キーフレームという単語は慣れっこだと思います！
約10年前、私はFlashのキーフレームでアニメーション作成したり、動画編集をしてました…作れていたかは別の話として(´· ·`)ｼｮﾎﾞｰｰﾝ…

 

さて、本題に戻りキーフレームとは

アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
0%はアニメーション開始時を表しており、100%はアニメーション終了時を表しています。

とGoogle先生は教えてくれました（「css keyframe とは」で検索した結果よりw

 

 

そうなんです、0%から100%の間に何をするか指定するんです。
スマートにやってのけてくれます。

 

では、実戦で見ていきましょう！

 

ひとまず、Resultの方を下までスクロールしていってください。

 

 

 

弊社サイトのトップページにある動き…みたいな感じですね！
ちょっと今回はjQueryを使用してます。
なぜって？
表示するタイミングをユーザーに合わせたかったんだよ！（逆ギレw
CSSだけだと、そこまでできないのが難点なんですよね…。

 

だけど、それ以外だったらバッチコイ！
jQuery側では、コンテンツが画面の下側1/7を過ぎたら、各classを付与してくれってやってます。
この辺は、またおいおい説明したいな（あくまで願望…

 

 

cssでは動きを設定しています。

 

News Listのボックスは、領域内に入ったらopacityを0→1にする。

 

Overviewのボックスは、領域内に入ってきたら変形しながら左から右へinする。

 

Product listのボックスは、領域内に入ってきたら右から左へinする。
かつ、それぞれのProductは縮小状態からデフォの大きさになり、かつ回転する。

 

Company informationは下から上へinする。

 

こんな感じのよく使われますよね。
今時の動く系サイト。
これ、どうやって作るの？って方の参考に少しでもなればいいな…。

 

あ、transformも色々な動きがあるので、後々しますね（こっちも願望w

 

 

 

コード書いたら満足してしまったw
…transitionとanimation、いかがでしたでしょうか？
できることが多過ぎて混乱してしまいがちですが、場面に応じて使用できるといいですよね！

ではっ！