CSS アニメーション

CSS Transition

transition1

transition2

transition3

CSS Animation

animation1

animation2

animation3

ローディング中に回転するアニメーションを表示する例

アニメーション作成参考動画

https://www.youtube.com/watch?v=JXa7c8E2ERQ

上記の動画のアニメーションとか作りやすいからアニメーションの練習に作るのとかいいかもしれない

みんなで動画内のアニメーションを実装していけると楽しいかもしれない

AnimationとTransitionの違い

アニメーション再生のトリガー

アニメーションのループ

複雑な動きができるか

アニメーション再生のトリガー

Transition

TransitionはCSSプロパティの変更に対してのみ反応し、再生する。

(:hover, :focus, :checkedなど)

JavaScriptを使えばTransitionでも自動再生はいける(CSSのみではトリガーが発生できないので再生できない)

Animation

Animationの場合は、トリガーを明示的に宣言する必要はありません(JavaScriptを使わずCSSだけで完結できる)。

一度アニメーションを定義してしまえば、自動的に再生される。

アニメーションのループ

Transition

Transitionの場合には、繰り返し何回も再生するように指定するpropertyはありません

トリガーされると、トランジションは一度だけ実行されます。

Animation

animation-iteration-countでループ回数を制御できる

無限にループさせた場合は、次のようにすることで実現できます。

animation-iteration-count: infinite;

複雑な動きができるか

Transitions

transitionオプション

transition-property アニメーション名

transition-duration アニメーション再生時間

transition-delay アニメーション開始時間

transition-timing-function アニメーションの進行

こんな感じ

transition ↑これをまとめられる

Animation

animationのオプション

animation-name アニメーション名

animation-duration アニメーション再生時間

animation-timing-function アニメーションの進行

言葉で説明すると難しいのでこんな感じ↓

animation-delay アニメーション開始時間

animation-iteration-count アニメーションの繰り返し回数

animation-direction アニメーションの再生方向

animation-fill-mode アニメーションの開始時と終了時の位置指定

animation-play-state アニメーションの再生。停止を指定

animation これを↑まとめられる

keyframes部分は単純

code:style.css

@keyframes animation-name {

// 開始時から終了時までの指定

0% { width: 0% }

50% { width: 50% }

100% { width: 100% }

}

keyframesはいくらでも指定できるので、これで複雑な動作をさせることが可能

複雑なAnimation例(拾い物)

まとめ

フォーカス、クリックなどトリガーが必要な時、単純な動作をするアニメーションを使いたい時はCSS Transitionを使おう

アニメーションのループ再生、画面が描画された時などトリガー無しで出したいアニメーションを使いたいときはCSS Animationを使おう

おまけ

VueにはTransitionラッパーが備わってるので便利

個人的な感想

アニメーションをたくさん使うような動きのあるサイトは最近そんなに見ない感じはする

最近だとPixivTechFesがめちゃくちゃ動いてていい感じ

現代でも愛生会病院みたいなサイトが主流になればたくさん使いそう