複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと

複雑なhtml/css アニメーション作品一覧 + 苦労したことについてお話します。
SepakerDeckにアップロードすると、アニメーションできないのできになる方は以下のURLでアクセスしてみてください

また、twitter・codepenなどをやっておりますのでフォローお願いします。

URL
●twitter
https://twitter.com/uemuragame5683

●codepen
https://codepen.io/uemuragame5683/

●時計
https://codepen.io/uemuragame5683/pen/eYNNqgL

●弁当
https://codepen.io/uemuragame5683/pen/QWNZaKd

●MIDI controller
https://codepen.io/uemuragame5683/pen/wvGggYm

●テトリス
https://codepen.io/uemuragame5683/pen/QWNoeQX

●ループステーション
https://codepen.io/uemuragame5683/pen/oNxgyzq

Transcript

1. 複雑なHTML/CSS アニメーション 作成して苦労したこと 10 / 31(SAT)
2. PROFILE うえむー twitter: @uemuragame5683 BLOG：http://nu-blogsite.net/ 職業：フロントエンドエンジニア スキル html・css・php・javascript・vue.js・jQuery gulp・SCSS etc 学習中 go・microcms・next.js・BASE etc
3. その前に聞きたいんですが、みなさんはcodepen しってますか？
4. CodePenは、ユーザーが作成したHTML、CSS、 JavaScriptコードスニペットをテストおよび展示する ためのオンラインコミュニティです。 https://codepen.io/
5. 半年以上 html/css アニメーションを 作成してcodepenに反映しました！
6. 　てんじ 作品 https://codepen.io/uemuragame56 83/pen/eYNNqgL https://codepen.io/uemuragame5683/pen/QWNZaKd
7. 作品 https://codepen.io/uemuragame5683/pen/wv GggYm https://codepen.io/uemuragame5683/ pen/QWNoeQX
8. 一番難しかったアニメーション 作品 https://codepen.io/uemuragame5683/pen/oNxgyzq
9. アニメーションを作成する上で挑戦した事
10. HTML / CSS アニメーション + レスポンシブ
11. DEMO https://codepen.io/uemuragame5683/pen/oNxgyzq SMP PC
12. HTML / CSS アニメーション + レスポンシブ を作成して苦労した事
13. 何が一番苦労したか？
14. フォント！！！
15. スタイルシートで指定できるフォントサイズには限界がある。 ブラウザが表示できる最小フォントサイズはだいたい10px これ以上縮小できず、レイアウトが崩れてしまう。 理由
16. 対応前・対応後の比較 対応前の比較 対応後の比較
17. 「transform:scale();」 解消方法
18. .sample { 　font-size:10px 　-webkit-transform:scale(0.7); 　-moz-transform:scale(0.7); 　-ms-transform:scale(0.7); 　-o-transform:scale(0.7); 　transform:scale(0.7); } 具体例 上記の様にフォントサイズを「10px」と指定したうえで transform:scale(0.7); と縮小させると、ブラウザでは「7px」で表示さ せられます。
19. ・ブラウザが表示できる最小フォントサイズはだいたい10px ・フォントの極限に縮小させるには「transform:scale();」 ・やっぱりアニメーションは楽しい！ まとめ
20. codepen https://codepen.io/uemuragame5683 nu-blog http://nu-blogsite.net/ twitter https://twitter.com/uemuragame5683 github https://github.com/uemura5683/ 共有事項（フォローお願いします！）
21. THANK YOU！！！