CSSアニメーションの狂気

DIST.30の資料です。
狂気の方向に一歩差がつくCSSアニメーションテクニックを紹介しています。
CSSでもっと遊ぼうよ、ということを伝えたいです。

Transcript

1. CSSアニメーションの狂気 DIST.30　一歩差がつくCSSテクニック
2. 自己紹介
3. Yusuke Nakaya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non est in enim placerat varius. Maecenas tempus massa eget ex consequat, ut rhoncus urna dignissim. Nulla et velit vel nulla suscipit ultricies id vitae est. In felis arcu, pellentesque eget pulvinar iaculis, posuere in est. Etiam gravida sed nisi sed pellentesque. Donec placerat sem nisi, eget tempus arcu iaculis quis. Nulla facilisi. Cras felis turpis, malesuada vitae purus quis, tempus scelerisque nibh. Nulla fermentum turpis et dui elementum ullamcorper. Morbi dapibus velit metus. Maecenas tempus massa 株式会社オロ テクニカルクリエイター CSSアニメーションが好き CodePenで200個以上のCSS作品を公開 CSS勉強会「Meguro.css」運営 Hello!
4. 1 Title of My Presentation 今日、 伝えたいこと
5. 狂気の方向に一歩差がつく CSSアニメーション テクニック
6. もっと CSSで遊ぼうよ
7. よく使うテクニック
8. よく使うテクニック CSS Animation リキッド 3D クリップ スライス 擬似マウス イベント ボーン カメラ チェイス
9. よく使うテクニック CSS Animation リキッド 3D クリップ スライス 擬似マウス イベント ボーン カメラ チェイス
10. 1 Title of My Presentation リキッド表現
11. 1 Title of My Presentation リキッドレイアウト 液体・流体表現
12. 動作デモ
13. Only CSS: Chase Ameba https://codepen.io/YusukeNakaya/pen/BONemg
14. CODE TIPS
19. filter: blur() contrast(); これだけ持って帰ってください
20. 1 Title of My Presentation 3D表現
21. 動作デモ
22. Only CSS: Pirates of the Caribbean https://codepen.io/YusukeNakaya/pen/KZrxYa
23. CODE TIPS
30. transform-style: preserve-3d; これだけ持って帰ってください
31. クリップスライス
32. 動作デモ
33. Only CSS: Fall In Love https://codepen.io/YusukeNakaya/pen/RLzzaz
34. CODE TIPS
37. 0 0 100% 0 0 100%
39. clip-path: polygon(); これだけ持って帰ってください
40. まとめ
41. よく使うテクニック CSS Animation リキッド 3D クリップ スライス 擬似マウス イベント ボーン カメラ チェイス
42. よく使うテクニック CSS Animation リキッド 3D クリップ スライス 擬似マウス イベント ボーン カメラ チェイス
43. Qiita: CSS Advent Calendar 2019 day 14 1
44. Yusuke Nakaya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non est in enim placerat varius. Maecenas tempus massa eget ex consequat, ut rhoncus urna dignissim. Nulla et velit vel nulla suscipit ultricies id vitae est. In felis arcu, pellentesque eget pulvinar iaculis, posuere in est. Etiam gravida sed nisi sed pellentesque. Donec placerat sem nisi, eget tempus arcu iaculis quis. Nulla facilisi. Cras felis turpis, malesuada vitae purus quis, tempus scelerisque nibh. Nulla fermentum turpis et dui elementum ullamcorper. Morbi dapibus velit metus. Maecenas tempus massa 　　　@s14garnet 　　　Yusuke Nakaya 　　　dribbble 　　　Meguro.css Thanks!