【CSSのアニメーション編】という再生リストを作ります！【YouTube】
しゅーた（@chibasyuta）です！
この記事は「新しい再生リスト」を作るので、そのお知らせ記事となります！
「CSSのアニメーション編」という再生リストをYouTube上で公開しようと思います！！！！
扱う内容！
「CSSのアニメーション編」という再生リストでは、その名前のままですが、CSSを用いてWebサイトにアニメーションをつける方法について解説していきます！！
アニメーションっていうのは簡単な動きのことを指しますね。いや、簡単といっても、複数の動きを同時につけたりすることで、複雑な動きを表現したりすることもできます。また、動きがあることで、なんて言ってもWebサイトがかっこよくなるので、適度に使うことでUIの改善だったりができるのかな、と思います！
情報を見やすくすることもできると思いますし、印象に残りやすくしたり、楽しんでもらえるようにすることもできると思うので、どんな風にアニメーションをCSSでつけるのか、知っておくと選択肢の幅が広がるので、デザイナーさんにもおすすめです！
あとブロガーさんなども、自分でWebサイトをカスタマイズすることで、より自分好みのサイトに仕上げることができるようになると思うので、おすすめです！
あと、単純にアニメーションを付けるのは楽しいと思うので、ぜひ楽しんでご視聴ください！
「transition」関連のプロパティを扱う！
「transition」関連のプロパティも網羅的に扱おうを思います！具体的には下記ですね。
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition-behavior（実験的）
これらのプロパティと「:hover」などの擬似クラスを一緒に使うことで、アニメーションが手軽につけられます！まずはこれについて再生リストの前半で扱いますね！
「@keyframes」関連のプロパティも扱います！
- animation
- animation-name
- animation-duration>
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
「@keyframes」というアットルールと上記のプロパティと若干のJavaScriptを書くことで、アニメーションをつける方法もあるのでそれについても網羅的に扱います！
試すこと！
丁寧に説明しすぎても、上級者や、軽く挙動を思い出したい方からすると、「ぐだぐだしてるな～」って感じられてしまうと思うので、解説するところはしますが、動きを見てみらえば十分なところは簡単に済ませようかな、と思います！
「永遠のβ版」にしようと思っています！
今までの再生リストは、これで完結！みたいにしていたのですが、最近作る再生リストは、これで完結！という形をとっていません。
例えば、新しいアニメーションに関する知識が手に入ったら、その都度再生リストに動画を追加していこうと思います！なので、再生リストを見終わった方も、チャンネル登録してお待ちしておいてもらえれば！またさらなる動画が追加されるかもしれないので、ぜひお願いします！！
どこから有料動画に切り替えるのか、についてはまだ考え中なので、絶対に無料で見たい！という方は早めに見てみらえると確実なのかなと思いますね！！今無料の動画も今後有料に切り替える可能性もあるので、その辺のこともお伝えしておきます！
Web記事版も用意するのでぜひ！
僕のYouTubeチャンネルに上がっている情報は、基本的にWeb記事版も用意していますので、もしテキストで学習したい！という方がいたら、こちらの「皇帝ペンギンブログ」をお読みください！
まとめ！
僕の作るコンテンツを何かに役立ててもらうのは全然OK！というか嬉しいのですが、１番は「楽しんで見てもらいたい！」ということですね。そのような考えでコンテンツを作っています！
そのためにはまず僕が楽しむことも重要だと思うので、伸ばそうとして誰かのスタイルに寄ってしまうとか、真似してしまう、ことを避けて、僕なりのスタイルを作っていく方針で頑張っていこうと思います。
どうしても、伸ばそうとして、伸びてるチャンネルと同じよなことをしてしまう、というのはあるあるだし、短期的に安定して伸ばすためには、それがいい選択であることは分かっているのですが、長期的には続けることと自分のスタイルを確立することが大事だと思っているので、ゆっくり伸ばしていこうと思いますね！！
では、この辺でこの記事を終わります！ここまで読んでくれてありがとうございました！それでは、また！