No content

はじめに 僕が考える現時点でましな方法論について話 すので、よりよい方法を知っている方がい らっしゃったら教えてください…

目次 1. ここでの CSS Animation の定義と魅力 2. CSS Animation で困ること 3. React styled-components の説明

1. 定義と魅力 ここでのCSS Animation: -ローディングアニメーション -ループアニメーション を扱います(特に長いアニメーション)

1. 定義と魅力 有名なCSS Animation @yui540さんの作品 https://www.yui540.graphics/

1. 定義と魅力 PIXIV TECH FES のサイト https://conference.pixiv.co.jp/2020/tech-fes

2. 困ること 自分で作ってみよう！！！ → -アイデアが浮かばない -素材を動かすには絵のスキルが必要 -ソースコードが長くて管理しづらい

2. 困ること ソースコード量がやばい・HTML/CSSの管理が難しい (minifyなし、@kaito_tateyama / summer warsの9周年記念 非公式サイトより)

そこでstyled-components !!!

3. styled-components -CSS in JS を実現できるライブラリ

HTMLもJSファイ ル内で書ける (JSX: React)

3. styled-components 嬉しいこと -width,heightのJSによる制御(レスポンシブ) -継承のようなことができる(component) -JSXによるHTMLの制御

作ってみた - https://uta8a.github.io/ugoku-kawaii/#/ugoku-kawaii/day3

styled-componentsでCSS Animationを はじめよう！ -長めのCSS Animationという分野がある -styled-componentsでCSS Animationのつらさが (ある程度)解決できる(CSS in JS, JSX)