1 / 30(SAT) 2年ぶりにCSSアニメーションを作ったよ！ 12/1 (SAT) うえむー

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…

1 / 30(SAT) まずは過去の作品を紹介します。 プロフィール

1 / 30(SAT) 　てんじ プロフィール https://codepen.io/uemuragame5683

LTをやろうとしたしたきっかけ それでは本題に移ります！

LTをやろうとしたしたきっかけ connpassでMeguro.cssを見つけて CSS好きだしCSSのLTをやりたい！

LTをやろうとしたしたきっかけ 過去にCSSアニメーションで作ったものを ここで発表をするのもいいが せっかくだし新たなCSSアニメーション を作りたい

LTをやろうとしたしたきっかけ でも何を作ればいいか思いつかない。。。

LTをやろうとしたしたきっかけ モクモク会で主催者と 相談して流行っているものとかはどう？ とアドバイスをいただきあるものを作ろうと思った

LTをやろうとしたしたきっかけ それは。。。

LTをやろうとしたしたきっかけ スイカゲームをオマージュした HTMLゲームのCSSアニメーションを作成することに！

CSSアニメーションを作成 期間が2週間しかない。。。でもやるしかない！

CSSアニメーションを作成 まずは、絵コンテを作成して イメージを作る

CSSアニメーションを作成 素材集めして / SVG化 SVG化は以下のツールがおすすめ！ https://ja.vectorizer.ai/

1 / 30(SAT) CSSアニメーションを作成 素材集めたらデザイン作成

CSSアニメーションを作成 デザインできたのでWebpack・Pug・Sassで実装。

CSSアニメーションを作成 完成したアニメーション https://css-modan.vercel.app/htmlgame-animation/dist/index.html

CSSアニメーションを作った感想 メリット 作品を完成した時の達成感がすごい 絵を描くような楽しさを実感する デメリット animationのdelayの設定が小数点が入るとアニメーションが任意に 動かない(特にsafari)

THANK YOU！！！