Forked from: GeckoTang's CSS3AnimationLibrary View Diff (1) forked: CSS3AnimationLibrary Surya Follow 2016-11-22 10:19:05 License: MIT License Fork1 Fav0 View3871 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 2 lines HTML 39 lines CSS 284 lines forked: CSS3AnimationLibrary // forked from GeckoTang's "CSS3AnimationLibrary" http://jsdo.it/GeckoTang/AniLib <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> forked: 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); } } // forked from GeckoTang's "CSS3AnimationLibrary" http://jsdo.it/GeckoTang/AniLib <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? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Surya 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/IiuY/js"></script> css3 library question webkit Discussion Questions on this code? Tags css3 library question webkit Forked sort by latest page views favorite forked forked: CSS3AnimationLibrary kawawasaki20 00 1844 3/39/284 css3 library question webkit