「ここのアニメーション、おまかせで！」と言われたら / What is important for css animation

Frontend Nagoya #7（https://frontend758.doorkeeper.jp/events/81433）の LT枠でお話させていただいた内容です。

Transcript

1. ͜͜ͷΞχϝʔγϣϯɺ
   ͓·͔ͤͰʂ Suzulabo
2. URL https:/ /suzulabo.com MAIL konatsu@suzulabo.com OHTA KONATSU WEB CREATOR & FRONT END ENGINEER 3 Web Suzulabo / 好きなタグは <section> です！ ࣗݾ঺հ
3. ͓࿩͢͠Δ͜ͱ 花 ! Attention !
4. ޷͖ͳΑ͏ʹ
   ͍͍ײ͡ʹ͍ͯͩ͘͠͞ʂ ࢥ͍͔ͭͳ͍ͷͰɺ
   ͓·͔ͤͰ͓ئ͍͠·͢ʂ 
5. ςʔϚͱͳΔงғؾΛܾΊΔ
7. ଎͞ 300ms ms ms ms ms 0.05 0.30 1.00
8. Πʔδϯά linear = = &&
9. Πʔδϯά ease-in ease-out ease-in-out
10. Πʔδϯά
11. ಈ͔͢ཁૉΛܾΊΔ DOWN ×
12. && ಈ͔͢ཁૉΛܾΊΔ ×
13. ׬੒ &&
14. Ҿ͖ग़͠Λ૿΍͢ʹ͸ʁ SNS Twitter Instagram LINE transform CSS
15. ·ͱΊ : Google Developers Material Design PhotoshopVIP
16. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ