CSS3AnimationLibrary

GeckoTang

2010-09-28 13:41:41

License: MIT License

Fork: 4

Fav: 15

View: 90292

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 39 lines
CSS 284 lines

CSS3AnimationLibrary

<article>
<h2>A_rotateR</h2>
<div class="ball A_rotateR A_transition_easeIn">(^^)</div>
<div class="ball A_rotateR A_transition_easeOut">(^^)</div>
</article>

<article>
<h2>A_rotateL</h2>
<div class="ball A_rotateL A_transition_easeIn">(^^)</div>
<div class="ball A_rotateL A_transition_easeOut">(^^)</div>
<div class="ball A_rotateL A_transition_easeIn A_origin_br">(^^)</div>
</article>

<article>
<h2>A_bounce</h2>
<div class="ball A_bounce A_transition_easeIn">(^^)</div>
<div class="ball A_bounce A_transition_easeOut">(^^)</div>
</article>

<article>
<h2>A_swing</h2>
<div class="ball A_swing A_count_0 A_time_1s A_transition_liner">(^^)</div>
<div class="ball A_swing A_count_10 A_time_1s A_transition_easeIn">(^^)</div>
</article>

<article>
<h2>A_zoomIn</h2>
<div class="ball A_zoomIn">(^^)</div>
<div class="ball A_zoomIn A_count_4 A_time_2s A_transition_liner">(^^)</div>
</article>

<article>
<h2>A_zoomOut</h2>
<div class="ball A_zoomOut">(^^)</div>
<div class="ball A_zoomOut A_count_4 A_time_2s A_transition_liner">(^^)</div>
</article>

CSS3AnimationLibrary

body{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;text-align: center;}
.ball{
  display:inline-block;
  width:40px;
  height:40px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background:#000;
  color:#fff;
  line-height:40px;
  text-align: center;
}
article{
  display:inline-block;
  width: 40%;
} 
/*
 * single class
 */
.A_bounce{
  position: relative;
  top: 0;
  -webkit-animation-name: A_func_bounce;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction:normal;
}
.A_swing{
  position: relative;
  -webkit-animation-name: A_func_swing;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-transform:rotate(0deg);
  -webkit-animation-direction:normal;
  -webkit-transform-origin:bottom center;
}
.A_zoomIn{
  -webkit-transform:scale(1);
  -webkit-animation-name: A_func_zoomIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
 -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_zoomOut{
  -webkit-transform:scale(1);
  -webkit-animation-name: A_func_zoomOut;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
 -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_rotateR,.A_rotateL{
  -webkit-transform:rotate(0deg);
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_rotateR{
  -webkit-animation-name: A_func_rotateR;
}
.A_rotateL{
  -webkit-animation-name: A_func_rotateL;
}
/*
 * mixed class
 */
.A_bounce.A_swing{
  -webkit-animation-name: A_func_swing,A_func_bounce;
}

/*
 * transform origin
 * center top right bottom left
 */
.A_origin_cc{-webkit-transform-origin:center center;}
.A_origin_rc{-webkit-transform-origin:right center;}
.A_origin_bc{-webkit-transform-origin:bottom center;}
.A_origin_lc{-webkit-transform-origin:left center;}

.A_origin_tc{-webkit-transform-origin:top center;}
.A_origin_tr{-webkit-transform-origin:top right;}
.A_origin_tl{-webkit-transform-origin:top left;}

.A_origin_br{-webkit-transform-origin:bottom right;}
.A_origin_bl{-webkit-transform-origin:bottom left;}

/*
 * animation count
 * infinite(00)-20
 */
.A_count_0{-webkit-animation-iteration-count: infinite;}
.A_count_1{-webkit-animation-iteration-count:1;}
.A_count_2{-webkit-animation-iteration-count:2;}
.A_count_3{-webkit-animation-iteration-count:3;}
.A_count_4{-webkit-animation-iteration-count:4;}
.A_count_5{-webkit-animation-iteration-count:5;}
.A_count_6{-webkit-animation-iteration-count:6;}
.A_count_7{-webkit-animation-iteration-count:7;}
.A_count_8{-webkit-animation-iteration-count:8;}
.A_count_9{-webkit-animation-iteration-count:9;}
.A_count_10{-webkit-animation-iteration-count:10;}
.A_count_11{-webkit-animation-iteration-count:11;}
.A_count_12{-webkit-animation-iteration-count:12;}
.A_count_13{-webkit-animation-iteration-count:13;}
.A_count_14{-webkit-animation-iteration-count:14;}
.A_count_15{-webkit-animation-iteration-count:15;}
.A_count_16{-webkit-animation-iteration-count:16;}
.A_count_17{-webkit-animation-iteration-count:17;}
.A_count_18{-webkit-animation-iteration-count:18;}
.A_count_19{-webkit-animation-iteration-count:19;}
.A_count_20{-webkit-animation-iteration-count:20;}
/*
 * animation duration
 * 1-20
 */
.A_time_1s{-webkit-animation-duration: 1s;}
.A_time_2s{-webkit-animation-duration: 2s;}
.A_time_3s{-webkit-animation-duration: 3s;}
.A_time_4s{-webkit-animation-duration: 4s;}
.A_time_5s{-webkit-animation-duration: 5s;}
.A_time_6s{-webkit-animation-duration: 6s;}
.A_time_7s{-webkit-animation-duration: 7s;}
.A_time_8s{-webkit-animation-duration: 8s;}
.A_time_9s{-webkit-animation-duration: 9s;}
.A_time_10s{-webkit-animation-duration: 10s;}
.A_time_11s{-webkit-animation-duration: 11s;}
.A_time_12s{-webkit-animation-duration: 12s;}
.A_time_13s{-webkit-animation-duration: 13s;}
.A_time_14s{-webkit-animation-duration: 14s;}
.A_time_15s{-webkit-animation-duration: 15s;}
.A_time_16s{-webkit-animation-duration: 16s;}
.A_time_17s{-webkit-animation-duration: 17s;}
.A_time_18s{-webkit-animation-duration: 18s;}
.A_time_19s{-webkit-animation-duration: 19s;}
.A_time_20s{-webkit-animation-duration: 20s;}
/*
 * animation timing function
 * ease | linear | ease-in | ease-out | ease-in-out 
 */
.A_transition_liner{-webkit-animation-timing-function: liner;}
.A_transition_easeIn{-webkit-animation-timing-function: ease-in;}
.A_transition_easeOut{-webkit-animation-timing-function: ease-out;}
.A_transition_easeInOut{-webkit-animation-timing-function: ease-in-out;}

/*
 * animation keyframes
 */
@-webkit-keyframes A_func_bounce {
  0%{
    top: 0;
  }
  12.5%{
    top: 0px;
  }
  25%{
    top: 0px;
  }
  37.5%{
    top: -5px;
  }
  50%{
    top: -5px;
  }
  62.5%{
    top: 0px;
  }
  75%{
    top: -2px;
  }
  87.5%{
    top: 0px;
  }
  90%{
    top: 0px;
  }
  100% {
    top: 0px;
  }
}
@-webkit-keyframes A_func_swing {
  0%{
    -webkit-transform:rotate(0deg);
  }
  12.5% {
    -webkit-transform:rotate(-45deg);
  }
  25% {
    -webkit-transform:rotate(-45deg);
  }
  75% {
    -webkit-transform:rotate(50deg);
  }
  90% {
    -webkit-transform:rotate(45deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
  }
}
@-webkit-keyframes A_func_zoomIn {
  0%{
    -webkit-transform:scale(1);
  }
  12.5%{
    -webkit-transform:scale(1);
  }
  37.5%{
    -webkit-transform:scale(1.5);
  }
  50%{
    -webkit-transform:scale(1.6);
  }
  62.5%{
    -webkit-transform:scale(1.5);
  }
  75%{
    -webkit-transform:scale(1);
  }
  90%{
    -webkit-transform:scale(1.2);
  }
  100% {
    -webkit-transform:scale(1);
  }
}
@-webkit-keyframes A_func_zoomOut {
  0%{
    -webkit-transform:scale(1);
  }
  12.5%{
    -webkit-transform:scale(1);
  }
  37.5%{
    -webkit-transform:scale(0.5);
  }
  50%{
    -webkit-transform:scale(0.4);
  }
  62.5%{
    -webkit-transform:scale(0.5);
  }
  75%{
    -webkit-transform:scale(1);
  }
  90%{
    -webkit-transform:scale(0.8);
  }
  100% {
    -webkit-transform:scale(1);
  }
}
@-webkit-keyframes A_func_rotateR {
  0%{
    -webkit-transform:rotate(0deg);
  }
  50%{
    -webkit-transform:rotate(360deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
  }
}
@-webkit-keyframes A_func_rotateL {
  0%{
    -webkit-transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(-360deg);
  }
  100% {
    -webkit-transform:rotate(-360deg);
  }
}

CSS3のアニメーションライブラリ需要があるのかは分かりませんが作成中。基本クラス+設定クラスの多重クラスにすることでアニメーションを好きに設定できる･･･かも？ questionタグをつけました。質問内容としては・命名規則を短くわかりやすくしたい・よく使われそうなアニメーションって･･･・あったら使う？<article> <h2>A_rotateR</h2> <div class="ball A_rotateR A_transition_easeIn">(^^)</div> <div class="ball A_rotateR A_transition_easeOut">(^^)</div> </article> <article> <h2>A_rotateL</h2> <div class="ball A_rotateL A_transition_easeIn">(^^)</div> <div class="ball A_rotateL A_transition_easeOut">(^^)</div> <div class="ball A_rotateL A_transition_easeIn A_origin_br">(^^)</div> </article> <article> <h2>A_bounce</h2> <div class="ball A_bounce A_transition_easeIn">(^^)</div> <div class="ball A_bounce A_transition_easeOut">(^^)</div> </article> <article> <h2>A_swing</h2> <div class="ball A_swing A_count_0 A_time_1s A_transition_liner">(^^)</div> <div class="ball A_swing A_count_10 A_time_1s A_transition_easeIn">(^^)</div> </article> <article> <h2>A_zoomIn</h2> <div class="ball A_zoomIn">(^^)</div> <div class="ball A_zoomIn A_count_4 A_time_2s A_transition_liner">(^^)</div> </article> <article> <h2>A_zoomOut</h2> <div class="ball A_zoomOut">(^^)</div> <div class="ball A_zoomOut A_count_4 A_time_2s A_transition_liner">(^^)</div> </article> body{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;text-align: center;} .ball{ display:inline-block; width:40px; height:40px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background:#000; color:#fff; line-height:40px; text-align: center; } article{ display:inline-block; width: 40%; } /* * single class */ .A_bounce{ position: relative; top: 0; -webkit-animation-name: A_func_bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; -webkit-animation-direction:normal; } .A_swing{ position: relative; -webkit-animation-name: A_func_swing; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; -webkit-transform:rotate(0deg); -webkit-animation-direction:normal; -webkit-transform-origin:bottom center; } .A_zoomIn{ -webkit-transform:scale(1); -webkit-animation-name: A_func_zoomIn; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; -webkit-animation-direction:normal; -webkit-transform-origin:center center; } .A_zoomOut{ -webkit-transform:scale(1); -webkit-animation-name: A_func_zoomOut; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; -webkit-animation-direction:normal; -webkit-transform-origin:center center; } .A_rotateR,.A_rotateL{ -webkit-transform:rotate(0deg); -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; -webkit-animation-direction:normal; -webkit-transform-origin:center center; } .A_rotateR{ -webkit-animation-name: A_func_rotateR; } .A_rotateL{ -webkit-animation-name: A_func_rotateL; } /* * mixed class */ .A_bounce.A_swing{ -webkit-animation-name: A_func_swing,A_func_bounce; } /* * transform origin * center top right bottom left */ .A_origin_cc{-webkit-transform-origin:center center;} .A_origin_rc{-webkit-transform-origin:right center;} .A_origin_bc{-webkit-transform-origin:bottom center;} .A_origin_lc{-webkit-transform-origin:left center;} .A_origin_tc{-webkit-transform-origin:top center;} .A_origin_tr{-webkit-transform-origin:top right;} .A_origin_tl{-webkit-transform-origin:top left;} .A_origin_br{-webkit-transform-origin:bottom right;} .A_origin_bl{-webkit-transform-origin:bottom left;} /* * animation count * infinite(00)-20 */ .A_count_0{-webkit-animation-iteration-count: infinite;} .A_count_1{-webkit-animation-iteration-count:1;} .A_count_2{-webkit-animation-iteration-count:2;} .A_count_3{-webkit-animation-iteration-count:3;} .A_count_4{-webkit-animation-iteration-count:4;} .A_count_5{-webkit-animation-iteration-count:5;} .A_count_6{-webkit-animation-iteration-count:6;} .A_count_7{-webkit-animation-iteration-count:7;} .A_count_8{-webkit-animation-iteration-count:8;} .A_count_9{-webkit-animation-iteration-count:9;} .A_count_10{-webkit-animation-iteration-count:10;} .A_count_11{-webkit-animation-iteration-count:11;} .A_count_12{-webkit-animation-iteration-count:12;} .A_count_13{-webkit-animation-iteration-count:13;} .A_count_14{-webkit-animation-iteration-count:14;} .A_count_15{-webkit-animation-iteration-count:15;} .A_count_16{-webkit-animation-iteration-count:16;} .A_count_17{-webkit-animation-iteration-count:17;} .A_count_18{-webkit-animation-iteration-count:18;} .A_count_19{-webkit-animation-iteration-count:19;} .A_count_20{-webkit-animation-iteration-count:20;} /* * animation duration * 1-20 */ .A_time_1s{-webkit-animation-duration: 1s;} .A_time_2s{-webkit-animation-duration: 2s;} .A_time_3s{-webkit-animation-duration: 3s;} .A_time_4s{-webkit-animation-duration: 4s;} .A_time_5s{-webkit-animation-duration: 5s;} .A_time_6s{-webkit-animation-duration: 6s;} .A_time_7s{-webkit-animation-duration: 7s;} .A_time_8s{-webkit-animation-duration: 8s;} .A_time_9s{-webkit-animation-duration: 9s;} .A_time_10s{-webkit-animation-duration: 10s;} .A_time_11s{-webkit-animation-duration: 11s;} .A_time_12s{-webkit-animation-duration: 12s;} .A_time_13s{-webkit-animation-duration: 13s;} .A_time_14s{-webkit-animation-duration: 14s;} .A_time_15s{-webkit-animation-duration: 15s;} .A_time_16s{-webkit-animation-duration: 16s;} .A_time_17s{-webkit-animation-duration: 17s;} .A_time_18s{-webkit-animation-duration: 18s;} .A_time_19s{-webkit-animation-duration: 19s;} .A_time_20s{-webkit-animation-duration: 20s;} /* * animation timing function * ease | linear | ease-in | ease-out | ease-in-out */ .A_transition_liner{-webkit-animation-timing-function: liner;} .A_transition_easeIn{-webkit-animation-timing-function: ease-in;} .A_transition_easeOut{-webkit-animation-timing-function: ease-out;} .A_transition_easeInOut{-webkit-animation-timing-function: ease-in-out;} /* * animation keyframes */ @-webkit-keyframes A_func_bounce { 0%{ top: 0; } 12.5%{ top: 0px; } 25%{ top: 0px; } 37.5%{ top: -5px; } 50%{ top: -5px; } 62.5%{ top: 0px; } 75%{ top: -2px; } 87.5%{ top: 0px; } 90%{ top: 0px; } 100% { top: 0px; } } @-webkit-keyframes A_func_swing { 0%{ -webkit-transform:rotate(0deg); } 12.5% { -webkit-transform:rotate(-45deg); } 25% { -webkit-transform:rotate(-45deg); } 75% { -webkit-transform:rotate(50deg); } 90% { -webkit-transform:rotate(45deg); } 100% { -webkit-transform:rotate(0deg); } } @-webkit-keyframes A_func_zoomIn { 0%{ -webkit-transform:scale(1); } 12.5%{ -webkit-transform:scale(1); } 37.5%{ -webkit-transform:scale(1.5); } 50%{ -webkit-transform:scale(1.6); } 62.5%{ -webkit-transform:scale(1.5); } 75%{ -webkit-transform:scale(1); } 90%{ -webkit-transform:scale(1.2); } 100% { -webkit-transform:scale(1); } } @-webkit-keyframes A_func_zoomOut { 0%{ -webkit-transform:scale(1); } 12.5%{ -webkit-transform:scale(1); } 37.5%{ -webkit-transform:scale(0.5); } 50%{ -webkit-transform:scale(0.4); } 62.5%{ -webkit-transform:scale(0.5); } 75%{ -webkit-transform:scale(1); } 90%{ -webkit-transform:scale(0.8); } 100% { -webkit-transform:scale(1); } } @-webkit-keyframes A_func_rotateR { 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(360deg); } 100% { -webkit-transform:rotate(360deg); } } @-webkit-keyframes A_func_rotateL { 0%{ -webkit-transform:rotate(0deg); } 50% { -webkit-transform:rotate(-360deg); } 100% { -webkit-transform:rotate(-360deg); } }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

GeckoTang

URL
http://geckotang.tumblr.com/

CSSプログラマーです

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/eB28/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

vault.vans:

animation css3

WallaceErick:

animations bounce css3 rotate swing zoomIn zoomOutCSS3 Animations

css

Forked

sort by

forked: CSS3AnimationLibrary

Surya

1
0
4832

2/39/284
- css3
- library
- question
- webkit

forked: CSS3AnimationLibrary

hirofumilog

0
0
4155

2/39/284
- css3
- library
- question
- webkit

forked: CSS3AnimationLibrary

yoshimana

0
1
2710

2/39/284
- css3
- library
- question
- webkit

forked from: CSS3AnimationLibr

smrhrms

0
0
1663

2/7/133
- css3
- library
- question
- webkit

CSS3AnimationLibrary

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked