Day 9-CSS入門　アニメーション編

★本日の学習成果まとめ

・transitionプロパティでできること
変化を行うためのトリガーが必要(クリック等)。
変化前と変化後の2つのスタイルしか指定できない。
・animationプロパティでできること
所要時間に応じて様々な動きを加えることができる。

・簡単なアニメーションの方法は
①タグのクラスを指定して変化前のスタイルを指定
②hoverやonclick-eventで動作する動きを設定する
③設定方法はtransitionプロパティで①移動　translate②回転　rotate③拡大・縮小　scaleの動きをつけることができる。
④動作時間や動きの滑らかさ等を変化前のスタイルに入れる
これで簡単な動きができるようになる。
※同じクラス内で複数のtransitionが出てくることはできないので、transitionしつつ、border-radiusしたいときは
transform:　transition　1s,border-radius　1s;という風に書く。

・よく見る、hoverでボタンがクイッってやつはscaleで縮小している。

・動きの基点はtransform-originで指定可能。

・変形を組み合わせる場合にはtransform:translate()　scale();のように記載し、右の動作から実行される。

・基本的にanimationプロパティでいいと思う。
アニメーションさせたいクラスにanimation　name:適当な名前;を指定して
@keyframes　適当な名前　で｛｝内に0%の時の動作を0%{}の中に記載。100%の時の動作を100%{}の中に記載すればアニメーションが動作する。

・ローディングアイコンは四角を作って丸にして、アニメーションさせれば可能。

・ポップアップメッセージはアニメーションの０％と１００％の時に消えている設定にしておけばよい。また、そのままだと、ボタン等をポップアップの裏に配置していた場合にボタンが押せないため、point-eventsをnoneにすればよい。

★備忘録ノート

・transition-property：動作時間を設定するプロパティを指定する
・transition-duration：動作時間を設定
この2つを使って、:hoverによってborder-radius:50%した際に、動作時間に応じてゆっくり動作させることができる。それによってアニメーションしているような動きになる。

・transformプロパティがよく使われる。
①移動　translate②回転　rotate③拡大・縮小　scale
することができる。
ただし、インライン要素には適応できないため、display:block等でブロック要素に変更することが必要。

・translate(X方向px,　Y方向px)の指定で、横方向や縦方向に移動させることができる。
また、translateX(8px)で横方向にだけ移動させることも可能。

・rotate(40deg)で40度の角度に回転することができる。マイナスをつければ逆回転することができる。

・scale(X方向の倍率,Y方向の倍率)で拡大、縮小ができる。ボタンをホバーしたときにクイッてなるやつはこれなんだな。

・transform originでtransformの基点となる場所を設定することができる。transform-origin:top leftと指定すれば、左上を起点として動きを設定できる。よくあるクリックしたらクイッってなるやつや。

・変形を組み合わせる場合には
transform:　translate()　rotate();　と指定することで2つの動作が行われる。
この場合は、右の動作から行われる。つまり、回転したのちに移動する。
しかし、逆に描いた場合には全く別の動作になる。
transform-originは固定されるため、固定された中心からの動作になる。つまり、回転したのちに回転した状態で真横に移動する。

・transition-derayによって動作するまでの時間を設定可能。

・transition-timing-functionで動きの速さや俊敏性を変えることができ、通常はeaseでよい。ほかにもたくさんあるが、linearもよく使う。

・複数のアニメーションを設定するときはtransition:　transform,border-radiusと記載する。個別に書くと後から書いたものだけが適用される。

・animationプロパティがある。transitionプロパティ同様に省略して記載可能。animation:　キーフレーム名　1s infinite 4s alternateで
1秒後にキーフレーム名の動作を４秒間で永遠に実行してほしい。１動作完了したら反対周りで動作してほしい。
という指令になる。

・ローディングアイコンは割と簡単に作成できる。
四角い箱を作って、radiusで円にして、@keyframesで100%の時に360degにして、animationプロパティでinfiniteしてやればできる。ただし、linearで滑らかに動かす必要がある。

・ポップアップメッセージもanimationプロパティで作られている。よく見るcokieのポップアップもこれか？
ポップアップメッセージは
①メッセージを画面右下に配置
②キーフレーム0%で画面外に配置
③キーフレーム20%で元の位置に配置
④キーフレーム80%まで継続
⑤キーフレーム100%で画面外に配置
で完成する。ただし、見えなくなっているだけで、画面右下にはポップアップが残ったままになるため、100%の段階でマウスほーばーすると反応しなくなる、pointer-eventsプロパティをnone
にすればよい。