Your SlideShare is downloading. ×
CSS3 filterとtransformをtransition, animationでアニメーション
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,299

Published on

2013-05-25 …

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,299
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. No JavaScript でアニメーションCSS3filter と transform をtransition, animation13年5月27日月曜日
  • 2. おおくぼ ひろあきインタラクティブ・デザイナー@taikiken自己紹介http://www.inazumatv.com/contents/13年5月27日月曜日
  • 3. Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity自己紹介:こんなの使ってます13年5月27日月曜日
  • 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. 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. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションできることDemo13年5月27日月曜日
  • 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. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってanimation@keyframesKeyframe機能で複雑なアニメーション設定が可能。経過時間(duration)、イージング(timing-function)+開始遅延(delay)、繰返し(iteration-count)、反転再生(direction)13年5月27日月曜日
  • 9. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションどうやってAnimate.csshttp://daneden.me/animate/13年5月27日月曜日
  • 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. 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. No JavaScript でアニメーション CSS3 filter と transform を transition, animationCSS3でアニメーションSass + Compasshttp://sass-lang.com/ http://compass-style.org/13年5月27日月曜日
  • 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. No JavaScript でアニメーション CSS3 filter と transform を transition, animationデモファイルCSS3 animation + transitionhttp://www.inazumatv.com/contents/archives/8716ブログでデモファイルへのリンクを記載した記事を書きました。よろしければご覧下さい。「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました13年5月27日月曜日
  • 15. No JavaScript でアニメーション CSS3 filter と transform を transition, animationお仕事の相談お待ちしていますありがとうございました13年5月27日月曜日

×