No JavaScript でアニメーション

CSS3filter と transform を

transition, animation

13年5月27日月曜日

おおくぼ　ひろあきインタラクティブ・デザイナー@taikiken

自己紹介

http://www.inazumatv.com/contents/

13年5月27日月曜日

Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity

自己紹介：こんなの使ってます

13年5月27日月曜日

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

CSS3でアニメーション

なぜ？

パフォーマンスの問題

http://developer.android.com/design/index.html http://www.apple.com/jp

スマホではJSでのアニメーションがカクカクしがち

13年5月27日月曜日

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

CSS3でアニメーション

http://neography.com/experiment/circles/solarsystem/

できること

http://lab.victorcoulon.fr/css/path-menu/

Path menu in pure CSS3

13年5月27日月曜日

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

CSS3でアニメーション

できること

Demo

13年5月27日月曜日

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

CSS3でアニメーション

どうやって

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日月曜日

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

CSS3でアニメーション

どうやって

animation

@keyframesKeyframe機能で複雑なアニメーション設定が可能。

経過時間(duration)、イージング(timing-function)+開始遅延(delay)、繰返し(iteration-count)、反転再生(direction)

13年5月27日月曜日

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

CSS3でアニメーション

どうやって

Animate.css

http://daneden.me/animate/

13年5月27日月曜日

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

CSS3でアニメーション

どうやって

animation@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }}

li#fadeOut:hover img { animation: fadeOut 1s infinite;}

13年5月27日月曜日

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

CSS3でアニメーション #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日月曜日

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

CSS3でアニメーション

Sass + Compass

http://sass-lang.com/ http://compass-style.org/

13年5月27日月曜日

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

CSS3でアニメーション

Animation Compass Plugin https://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日月曜日

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

デモファイル

CSS3 animation + transition

http://www.inazumatv.com/contents/archives/8716

ブログでデモファイルへのリンクを記載した記事を書きました。よろしければご覧下さい。

「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました

13年5月27日月曜日

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

お仕事の相談お待ちしています

ありがとうございました

13年5月27日月曜日