No JavaScript でアニメーション
CSS3
filter と transform を
transition, animation
13年5月27日月曜日
おおくぼ ひろあき
インタラクティブ・デザイナー
@taikiken
自己紹介
http://www.inazumatv.com/contents/
13年5月27日月曜日
Flash / ActionScript
HTML, CSS, JavaScript
Perl, PHP
MySQL, PostgreSQL
iOS / Objective-C
Unity
自己紹介:こんなの使ってます
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
@keyframes
Keyframe機能で複雑なアニメーション設定が可能。
経過時間(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日月曜日

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

  • 1.
    No JavaScript でアニメーション CSS3 filterと transform を transition, animation 13年5月27日月曜日
  • 2.
  • 3.
    Flash / ActionScript HTML,CSS, JavaScript Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity 自己紹介:こんなの使ってます 13年5月27日月曜日
  • 4.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation CSS3でアニメーション なぜ? パフォーマンスの問題 http://developer.android.com/design/index.html http://www.apple.com/jp スマホではJSでのアニメーションがカクカクしがち 13年5月27日月曜日
  • 5.
    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日月曜日
  • 6.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation CSS3でアニメーション できること Demo 13年5月27日月曜日
  • 7.
    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日月曜日
  • 8.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation CSS3でアニメーション どうやって animation @keyframes Keyframe機能で複雑なアニメーション設定が可能。 経過時間(duration)、イージング(timing-function) + 開始遅延(delay)、繰返し(iteration-count)、反転再生(direction) 13年5月27日月曜日
  • 9.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation CSS3でアニメーション どうやって Animate.css http://daneden.me/animate/ 13年5月27日月曜日
  • 10.
    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日月曜日
  • 11.
    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日月曜日
  • 12.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation CSS3でアニメーション Sass + Compass http://sass-lang.com/ http://compass-style.org/ 13年5月27日月曜日
  • 13.
    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日月曜日
  • 14.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation デモファイル CSS3 animation + transition http://www.inazumatv.com/contents/archives/8716 ブログでデモファイルへのリンクを記載した記事を書きました。 よろしければご覧下さい。 「HTML5+α初心者勉強会 @福岡 第1回」 資料を公開しました 13年5月27日月曜日
  • 15.
    No JavaScript でアニメーションCSS3 filter と transform を transition, animation お仕事の相談お待ちしています ありがとうございました 13年5月27日月曜日