Cammel-LT#5 入門してみた: CSS Animation & React/styled-components

Link:
yui540さんの作品 https://www.yui540.graphics/
pixiv tech fesのサイト https://conference.pixiv.co.jp/2020/tech-fes

kaito_tateyama: サマーウォーズ9周年記念非公式サイト https://github.com/uta8a/summer_wars_9th_anniversary
styled-components https://github.com/styled-components/styled-components
作ってみたサイト https://uta8a.github.io/ugoku-kawaii/#/ugoku-kawaii/day3

Transcript

2. はじめに 僕が考える現時点でましな方法論について話 すので、よりよい方法を知っている方がい らっしゃったら教えてください…
3. 目次 1. ここでの CSS Animation の定義と魅力 2. CSS Animation で困ること 3. React styled-components の説明
4. 1. 定義と魅力 ここでのCSS Animation: -ローディングアニメーション -ループアニメーション を扱います(特に長いアニメーション)
5. 1. 定義と魅力 有名なCSS Animation @yui540さんの作品 https://www.yui540.graphics/
6. 1. 定義と魅力 PIXIV TECH FES のサイト https://conference.pixiv.co.jp/2020/tech-fes
7. 2. 困ること 自分で作ってみよう！！！ → -アイデアが浮かばない -素材を動かすには絵のスキルが必要 -ソースコードが長くて管理しづらい
8. 2. 困ること ソースコード量がやばい・HTML/CSSの管理が難しい (minifyなし、@kaito_tateyama / summer warsの9周年記念 非公式サイトより)
9. そこでstyled-components !!!
10. 3. styled-components -CSS in JS を実現できるライブラリ
11. HTMLもJSファイ ル内で書ける (JSX: React)
12. 3. styled-components 嬉しいこと -width,heightのJSによる制御(レスポンシブ) -継承のようなことができる(component) -JSXによるHTMLの制御
13. 作ってみた - https://uta8a.github.io/ugoku-kawaii/#/ugoku-kawaii/day3
14. styled-componentsでCSS Animationを はじめよう！ -長めのCSS Animationという分野がある -styled-componentsでCSS Animationのつらさが (ある程度)解決できる(CSS in JS, JSX)