Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cssアニメーションとその制御

2,877 views

Published on

  • Be the first to comment

Cssアニメーションとその制御

  1. 1. ∼ ∼CSSアニメーションとその制御についてCreators MeetUp第3回
  2. 2. 自己紹介名前所属職種twFBBlogMail藤田 無憂フリーランスディレクターフロントエンドエンジニアIT僧侶@anticyborgmuyuuhttp://stackstock.net/anticyborg@gmail.com
  3. 3. 覚えたアビリティフロントエンド端末対応レスポンシブWebデザインサーバサイドスマートフォン用サイト・Webアプリ
  4. 4. 今日のお話•Webとアニメーション•CSSアニメーションとは•CSSアニメーションの種類•制御する方法
  5. 5. Webとアニメーション
  6. 6. Webとアニメーション•今まではアニメーションと言えばFlash•Appleの「Flashいらね」宣言でみんな大変•「javascriptがあるじゃないか!」
  7. 7. JQueryで割と簡単にできる•記述が簡単•デザイナーフレンドリー
  8. 8. Javascriptのアニメーションは重い元々アニメーションの機能があるわけではないので、割と強引な手法で動かしてたりします。
  9. 9. Javascriptのアニメーションは重い元々アニメーションの機能があるわけではないので、割と強引な手法で動かしてたりします。そこでCSSですよ!
  10. 10. DEMOhttp://stackstock.net/demo/cmu0427/d06.html
  11. 11. CSSアニメーションとは
  12. 12. cssアニメーションとは•Level3(通称css3)で機能が追加された•ブラウザネイティブなので軽快な動作Javascriptはアニメーション機能を持っているわけではないので基本的には処理が重くなりがちIEは(いつものように)未対応•対応ブラウザは微妙
  13. 13. そんな感じでスマートフォンサイト、Webアプリのアニメーションにはcssが採用されるケースが多くなってきています。
  14. 14. cssアニメーションの種類
  15. 15. cssアニメーションの種類•transitionプロパティ:hover等の特定のアクションに対しての要素の変化をアニメーションさせるプロパティ。アクション終了時には逆のアニメーションで戻る要素の変化に対してアニメーションをつける
  16. 16. DEMOhttp://stackstock.net/demo/cmu0427/d01.html
  17. 17. transitionプロパティ•transition-property•transition-durationどの要素に対してアニメーションをさせるかアニメーションにかける時間•transition-delayアニメーションを開始するまでの遅延時間•transition-timing-functionどんなタイミングでどんな速度でアニメーションさせるか(イージング)
  18. 18. cssアニメーションの種類•animationプロパティキーフレームを使ってFlashのように柔軟に要素をアニメーションさせるプロパティ。タイムライン的なアニメーションができる
  19. 19. DEMOhttp://stackstock.net/demo/cmu0427/d02.html
  20. 20. animationプロパティ•animation-name•animation-duration実行するアニメーションの名前(@keyframes の名前)アニメーションにかける時間•animation-delayアニメーションを開始するまでの遅延時間•animation-iteration-count何回アニメーションを繰り返すか
  21. 21. animationプロパティ•animation-direction•animation-play-stateアニメーションの再生方向一時停止したり再開したり•animation-timing-functionどんなタイミングでどんな速度でアニメーションさせるか(イージング)•animation-fill-modeアニメーション実行後の振る舞いをどうするか
  22. 22. アニメーションの制御
  23. 23. クリックでアニメーションを開始http://stackstock.net/demo/cmu0427/d03.html
  24. 24. アニメーション終了後に次のアニメーションを開始http://stackstock.net/demo/cmu0427/d04.html
  25. 25. さっきのDEMOを修正して、何度でもクリックに反応する子に調教http://stackstock.net/demo/cmu0427/d03.5.html
  26. 26. 最後にデモっぽいやつをhttp://stackstock.net/demo/cmu0427/d05.html
  27. 27. 今のところ、cssアニメーションは全部手書きで動きも秒数も指定しないといけないめんどくさいっ!!
  28. 28. cssアニメーションの課題•端末、ブラウザの対応には延々悩まされる•オーサリングツールがない
  29. 29. 時が解決してくれるよきっと例えばこの子とか…きっと…
  30. 30. 今はきっと、基礎力を養う時期
  31. 31. がんばろうぜ!
  32. 32. ありがとうございました

×