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.

CSS3 filterとtransformをtransition, animationでアニメーション

2013-05-25
「HTML5+α初心者勉強会 @福岡 第1回」資料
場所:九州産業大学

CSS3 filterとtransformをtransition, animationでアニメーション

  1. 1. No JavaScript でアニメーションCSS3filter と transform をtransition, animation13年5月27日月曜日
  2. 2. おおくぼ ひろあきインタラクティブ・デザイナー@taikiken自己紹介http://www.inazumatv.com/contents/13年5月27日月曜日
  3. 3. Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity自己紹介:こんなの使ってます13年5月27日月曜日
  4. 4. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションなぜ?パフォーマンスの問題http://developer.android.com/design/index.html http://www.apple.com/jpスマホではJSでのアニメーションがカクカクしがち13年5月27日月曜日
  5. 5. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションhttp://neography.com/experiment/circles/solarsystem/できることhttp://lab.victorcoulon.fr/css/path-menu/Path menu in pure CSS313年5月27日月曜日
  6. 6. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションできることDemo13年5月27日月曜日
  7. 7. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってtransition#thumbnail li img {transition-property: filter;transition-duration: 1s;transition-timing-function: linear;}#thumbnail li#sepia img {filter: sepia(100%);}#thumbnail li:hover#sepia img {filter: sepia(0%);}13年5月27日月曜日
  8. 8. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってanimation@keyframesKeyframe機能で複雑なアニメーション設定が可能。経過時間(duration)、イージング(timing-function)+開始遅延(delay)、繰返し(iteration-count)、反転再生(direction)13年5月27日月曜日
  9. 9. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってAnimate.csshttp://daneden.me/animate/13年5月27日月曜日
  10. 10. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってanimation@keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}li#fadeOut:hover img {animation: fadeOut 1s infinite;}13年5月27日月曜日
  11. 11. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーション#thumbnail li img {-webkit-transition-property: -webkit-filter;-moz-transition-property: -moz-filter;-o-transition-property: -o-filter;transition-property: filter;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;-o-transition-duration: 1s;transition-duration: 1s;}#thumbnail li#sepia img {-webkit-filter: sepia(100%);-moz-filter: sepia(100%);filter: sepia(100%);}#thumbnail li:hover#sepia img {-webkit-filter: sepia(0%);-moz-filter: sepia(0%);filter: sepia(0%);}ベンダープレフィックス13年5月27日月曜日
  12. 12. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションSass + Compasshttp://sass-lang.com/ http://compass-style.org/13年5月27日月曜日
  13. 13. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションAnimation Compass Pluginhttps://github.com/ericam/compass-animation@include keyframes( fadeOut ) {0% {@include opacity(1);}100% {@include opacity(0);}}#example {@include animation( fadeOut 1s infinite linear );}13年5月27日月曜日
  14. 14. No JavaScript でアニメーション CSS3 filter と transform を transition, animationデモファイルCSS3 animation + transitionhttp://www.inazumatv.com/contents/archives/8716ブログでデモファイルへのリンクを記載した記事を書きました。よろしければご覧下さい。「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました13年5月27日月曜日
  15. 15. No JavaScript でアニメーション CSS3 filter と transform を transition, animationお仕事の相談お待ちしていますありがとうございました13年5月27日月曜日

×