2年ぶりにCSSアニメーションを作ったよ！

Transcript

1. 1 / 30(SAT) 2年ぶりにCSSアニメーションを作ったよ！ 12/1 (SAT) うえむー
2. 1 / 30(SAT) プロフィール うえむー @uemuragame5683 http://nu-blogsite.net/ https://uemu-engineer.com/ 職業：フロントエンドエンジニア 趣味：ゴルフ・ランニング・麻雀・ボードゲーム スキル HTML / CSS / SCSS / Pug / JavaScript / PHP / Liquid /WordPress / MobableType / microCMS / Newt / 楽天RMS / AWS / SSH / GitHub / PowerShell / Git / Bitbucket /Symfony / Laravel / Next.js / Astro / jQuery /Three.js / Babylon.js / MySQL / Figma / XD / PhotoShop etc…
3. 1 / 30(SAT) まずは過去の作品を紹介します。 プロフィール
4. 1 / 30(SAT) 　てんじ プロフィール https://codepen.io/uemuragame5683
5. LTをやろうとしたしたきっかけ それでは本題に移ります！
6. LTをやろうとしたしたきっかけ connpassでMeguro.cssを見つけて CSS好きだしCSSのLTをやりたい！
7. LTをやろうとしたしたきっかけ 過去にCSSアニメーションで作ったものを ここで発表をするのもいいが せっかくだし新たなCSSアニメーション を作りたい
8. LTをやろうとしたしたきっかけ でも何を作ればいいか思いつかない。。。
9. LTをやろうとしたしたきっかけ モクモク会で主催者と 相談して流行っているものとかはどう？ とアドバイスをいただきあるものを作ろうと思った
10. LTをやろうとしたしたきっかけ それは。。。
11. LTをやろうとしたしたきっかけ スイカゲームをオマージュした HTMLゲームのCSSアニメーションを作成することに！
12. CSSアニメーションを作成 期間が2週間しかない。。。でもやるしかない！
13. CSSアニメーションを作成 まずは、絵コンテを作成して イメージを作る
14. CSSアニメーションを作成 素材集めして / SVG化 SVG化は以下のツールがおすすめ！ https://ja.vectorizer.ai/
15. 1 / 30(SAT) CSSアニメーションを作成 素材集めたらデザイン作成
16. CSSアニメーションを作成 デザインできたのでWebpack・Pug・Sassで実装。
17. CSSアニメーションを作成 完成したアニメーション https://css-modan.vercel.app/htmlgame-animation/dist/index.html
18. CSSアニメーションを作った感想 メリット 作品を完成した時の達成感がすごい 絵を描くような楽しさを実感する デメリット animationのdelayの設定が小数点が入るとアニメーションが任意に 動かない(特にsafari)
19. THANK YOU！！！