CSS3AnimationLibrary GeckoTang Follow 2010-09-28 13:41:41 License: MIT License Fork4 Fav15 View87790 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 39 lines CSS 284 lines CSS3のアニメーションライブラリ 需要があるのかは分かりませんが作成中。 基本クラス+設定クラスの多重クラスにすることで アニメーションを好きに設定できる・・・かも? questionタグをつけました。 質問内容としては ・命名規則を短くわかりやすくしたい ・よく使われそうなアニメーションって・・・ ・あったら使う? 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); } } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? CSS3のアニメーションライブラリ 需要があるのかは分かりませんが作成中。 基本クラス+設定クラスの多重クラスにすることで アニメーションを好きに設定できる・・・かも? questionタグをつけました。 質問内容としては ・命名規則を短くわかりやすくしたい ・よく使われそうなアニメーションって・・・ ・あったら使う? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author GeckoTang URLhttp://geckotang.tumblr.com/ CSSプログラマーです Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/eB28/js"></script> css3 library question webkit Discussion Questions on this code? Tags CSS3 animation animations bounce library question rotate swing webkit zoomIn zoomOut Favorite by yomenamiyama Kentarou.Kod hikipuro kyosuke.w fingaholic ikedahidenor hisdy y3i12 tenkao yumenikki444 vault.vans: animationcss3 WallaceErick: animationsbouncecss3rotateswingzoomInzoomOutCSS3 Animations ericaliforny: animationCSS3 Docfive: css gryng02: animationCSS3css3 Forked sort by latest page views favorite forked forked: CSS3AnimationLibrary Surya 10 3871 2/39/284 css3 library question webkit forked: CSS3AnimationLibrary hirofumilog 00 3791 2/39/284 css3 library question webkit forked: CSS3AnimationLibrary yoshimana 01 2443 2/39/284 css3 library question webkit forked from: CSS3AnimationLibr smrhrms 00 1559 2/7/133 css3 library question webkit