CSSアニメーションの狂気

2eeab90989e01fba3006c0d6db905180?s=47 Yusuke Nakaya
December 13, 2019

 CSSアニメーションの狂気

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

2eeab90989e01fba3006c0d6db905180?s=128

Yusuke Nakaya

December 13, 2019
Tweet

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

  15. None
  16. None
  17. None
  18. None
  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

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. transform-style: preserve-3d; これだけ持って帰ってください

  31. クリップスライス

  32. 動作デモ

  33. Only CSS: Fall In Love https://codepen.io/YusukeNakaya/pen/RLzzaz

  34. CODE TIPS

  35. None
  36. None
  37. 0 0 100% 0 0 100%

  38. None
  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!