Icecream flyight (Only CSS)

HTML
<div class="contenedor"> <div class="caja"> <div class="ice"> <div class="ice1"></div> <div class="ice2"></div> <div class="ice3"></div> <div class="ice4"></div> <div class="ice5"></div> <div class="ice6"></div> <div class="ice7"></div> <div class="ice8"></div> <div class="ice9"></div> <div class="ice10"></div> <div class="ice11"></div> <div class="ice12"></div> <div class="ice13"></div> <div class="ice14"></div> <div class="ice15"></div> <div class="ice16"></div> <div class="ice17"></div> <div class="ice18"></div> <div class="ice19"></div> <div class="ice20"></div> <div class="ice21"></div> <div class="lin"> <div class="l1"></div> <div class="l2"></div> <div class="l3"></div> <div class="l4"></div> <div class="l5"></div> <div class="l6"></div> <div class="l7"></div> <div class="l8"></div> </div> </div> </div> <div class="viento"></div> <div class="viento3"></div> <div class="viento5"></div> <div class="nube"></div> <div class="nube3"></div> </div>
CSS
body{ background:black; } .contenedor{ position:relative; width:500px; height:500px; border-radius:100%; background:lightblue; perspective: 800px; perspective-origin: 50% 0%; margin:231px auto; } .caja{ position:absolute; width:70px; height:30px; animation:sube 3s alternate infinite; -moz-animation:sube 3s alternate infinite; -webkit-animation:sube 3s alternate infinite; } .ice{ position: relative; width: 200px; transform-style: preserve-3d; } .ice div { position: absolute; margin:0px 0px; width:65px; height:112px; border-radius:70px 70px 12px 12px; } .lin{ position: relative; width: 200px; transform-style: preserve-3d; } .lin div { position: absolute; margin:112px 21px; width:21px; height:50px; border-radius:0 0 70px 70px ; } .ice2, .ice3, .ice4, .ice5, .ice6, .ice7,.ice8, .ice9, .ice10, .ice11, .ice12,.ice13, .ice14, .ice15, .ice16, .ice17,.ice18, .ice19, .ice20, .ice21{ background: -moz-linear-gradient(top, #f934f9 0%, #f934f9 50%, #f788d4 50%, #f934f9 50%, #f788d4 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f934f9), color-stop(50%,#f934f9), color-stop(50%,#f788d4), color-stop(50%,#f934f9), color-stop(50%,#f788d4)); background: -webkit-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%); background: -o-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%); background: -ms-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%); background: linear-gradient(to bottom, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f934f9', endColorstr='#f788d4',GradientType=0 ); } .ice1{ transform: rotateY(-300deg) translatez(1px); -moz-transform: rotateY(-300deg) translatez(1px); -webkit-transform: rotateY(-300deg) translatez(1px); transform-origin: top center; background: #db59d0; background: -moz-linear-gradient(top, #db59d0 0%, #f75bf7 50%, #f49cd8 50%, #f49cd8 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db59d0), color-stop(50%,#f75bf7), color-stop(50%,#f49cd8), color-stop(50%,#f49cd8)); background: -webkit-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: -o-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: -ms-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: linear-gradient(to bottom, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db59d0', endColorstr='#f49cd8',GradientType=0 ); animation:rotar1 3s linear infinite; -moz-animation:rotar1 3s linear infinite; -webkit-animation:rotar1 3s linear infinite; } .ice1::before{ content:""; display:block; width:7px; height:70px; background:rgba(255,255,255,.3); margin:30px 7px; } .ice2{ transform: rotateY(-300deg) translatez(2px); -moz-transform: rotateY(-300deg) translatez(2px); -webkit-transform: rotateY(-300deg) translatez(2px); transform-origin: top center; animation:rotar2 3s linear infinite; -moz-animation:rotar2 3s linear infinite; -webkit-animation:rotar2 3s linear infinite; } .ice3{ transform: rotateY(-300deg) translatez(3px); -moz-transform: rotateY(-300deg) translatez(3px); -webkit-transform: rotateY(-300deg) translatez(3px); transform-origin: top center; animation:rotar3 3s linear infinite; -moz-animation:rotar3 3s linear infinite; -webkit-animation:rotar3 3s linear infinite; } .ice4{ transform: rotateY(-300deg) translatez(4px); -moz-transform: rotateY(-300deg) translatez(4px); -webkit-transform: rotateY(-300deg) translatez(4px); transform-origin: top center; animation:rotar4 3s linear infinite; -moz-animation:rotar4 3s linear infinite; -webkit-animation:rotar4 3s linear infinite; } .ice5{ transform: rotateY(-300deg) translatez(5px); -moz-transform: rotateY(-300deg) translatez(5px); -webkit-transform: rotateY(-300deg) translatez(5px); transform-origin: top center; animation:rotar5 3s linear infinite; -moz-animation:rotar5 3s linear infinite; -webkit-animation:rotar5 3s linear infinite; } .ice6 { transform: rotateY(-300deg) translatez(6px); -moz-transform: rotateY(-300deg) translatez(6px); -webkit-transform: rotateY(-300deg) translatez(6px); transform-origin: top center; animation:rotar6 3s linear infinite; -moz-animation:rotar6 3s linear infinite; -webkit-animation:rotar6 3s linear infinite; } .ice7{ transform: rotateY(-300deg) translatez(7px); -moz-transform: rotateY(-300deg) translatez(7px); -webkit-transform: rotateY(-300deg) translatez(7px); transform-origin: top center; animation:rotar7 3s linear infinite; -moz-animation:rotar7 3s linear infinite; -webkit-animation:rotar7 3s linear infinite; } .ice8{ transform: rotateY(-300deg) translatez(8px); -moz-transform: rotateY(-300deg) translatez(8px); -webkit-transform: rotateY(-300deg) translatez(8px); transform-origin: top center; animation:rotar8 3s linear infinite; -moz-animation:rotar8 3s linear infinite; -webkit-animation:rotar8 3s linear infinite; } .ice9{ transform: rotateY(-300deg) translatez(9px); -moz-transform: rotateY(-300deg) translatez(9px); -webkit-transform: rotateY(-300deg) translatez(9px); transform-origin: top center; animation:rotar9 3s linear infinite; -moz-animation:rotar9 3s linear infinite; -webkit-animation:rotar9 3s linear infinite; } .ice10{ transform: rotateY(-300deg) translatez(10px); -moz-transform: rotateY(-300deg) translatez(10px); -webkit-transform: rotateY(-300deg) translatez(10px); transform-origin: top center; animation:rotar10 3s linear infinite; -moz-animation:rotar10 3s linear infinite; -webkit-animation:rotar10 3s linear infinite; } .ice11{ transform: rotateY(-300deg) translatez(11px); -moz-transform: rotateY(-300deg) translatez(11px); -webkit-transform: rotateY(-300deg) translatez(11px); transform-origin: top center; animation:rotar11 3s linear infinite; -moz-animation:rotar11 3s linear infinite; -webkit-animation:rotar11 3s linear infinite; } .ice12{ transform: rotateY(-300deg) translatez(12px); -moz-transform: rotateY(-300deg) translatez(12px); -webkit-transform: rotateY(-300deg) translatez(12px); transform-origin: top center; animation:rotar12 3s linear infinite; -moz-animation:rotar12 3s linear infinite; -webkit-animation:rotar12 3s linear infinite; } .ice13{ transform: rotateY(-300deg) translatez(13px); -moz-transform: rotateY(-300deg) translatez(13px); -webkit-transform: rotateY(-300deg) translatez(13px); transform-origin: top center; animation:rotar13 3s linear infinite; -moz-animation:rotar13 3s linear infinite; -webkit-animation:rotar13 3s linear infinite; } .ice14{ transform: rotateY(-300deg) translatez(14px); -moz-transform: rotateY(-300deg) translatez(14px); -webkit-transform: rotateY(-300deg) translatez(14px); transform-origin: top center; animation:rotar14 3s linear infinite; -moz-animation:rotar14 3s linear infinite; -webkit-animation:rotar14 3s linear infinite; } .ice15{ transform: rotateY(-300deg) translatez(15px); -moz-transform: rotateY(-300deg) translatez(15px); -webkit-transform: rotateY(-300deg) translatez(15px); transform-origin: top center; animation:rotar15 3s linear infinite; -moz-animation:rotar15 3s linear infinite; -webkit-animation:rotar15 3s linear infinite; } .ice16{ transform: rotateY(-300deg) translatez(16px); -moz-transform: rotateY(-300deg) translatez(16px); -webkit-transform: rotateY(-300deg) translatez(16px); transform-origin: top center; animation:rotar16 3s linear infinite; -moz-animation:rotar16 3s linear infinite; -webkit-animation:rotar16 3s linear infinite; } .ice17{ transform: rotateY(-300deg) translatez(17px); -moz-transform: rotateY(-300deg) translatez(17px); -webkit-transform: rotateY(-300deg) translatez(17px); transform-origin: top center; animation:rotar17 3s linear infinite; -moz-animation:rotar17 3s linear infinite; -webkit-animation:rotar17 3s linear infinite; } .ice18{ transform: rotateY(-300deg) translatez(18px); -moz-transform: rotateY(-300deg) translatez(18px); -webkit-transform: rotateY(-300deg) translatez(18px); transform-origin: top center; animation:rotar18 3s linear infinite; -moz-animation:rotar18 3s linear infinite; -webkit-animation:rotar18 3s linear infinite; } .ice19{ transform: rotateY(-300deg) translatez(19px); -moz-transform: rotateY(-300deg) translatez(19px); -webkit-transform: rotateY(-300deg) translatez(19px); transform-origin: top center; animation:rotar19 3s linear infinite; -moz-animation:rotar19 3s linear infinite; -webkit-animation:rotar19 3s linear infinite; } .ice20{ transform: rotateY(-300deg) translatez(20px); -moz-transform: rotateY(-300deg) translatez(20px); -webkit-transform: rotateY(-300deg) translatez(20px); transform-origin: top center; animation:rotar20 3s linear infinite; -moz-animation:rotar20 3s linear infinite; -webkit-animation:rotar20 3s linear infinite; } .ice21{ transform: rotateY(-300deg) translatez(21px); -moz-transform: rotateY(-300deg) translatez(21px); -webkit-transform: rotateY(-300deg) translatez(21px); transform-origin: top center; background: #db59d0; background: -moz-linear-gradient(top, #db59d0 0%, #f75bf7 50%, #f49cd8 50%, #f49cd8 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db59d0), color-stop(50%,#f75bf7), color-stop(50%,#f49cd8), color-stop(50%,#f49cd8)); background: -webkit-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: -o-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: -ms-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); background: linear-gradient(to bottom, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db59d0', endColorstr='#f49cd8',GradientType=0 ); animation:rotar21 3s linear infinite; -moz-animation:rotar21 3s linear infinite; -webkit-animation:rotar21 3s linear infinite; } .ice21::before{ content:""; display:block; width:7px; height:70px; background:rgba(255,255,255,.3); margin:30px 50px } .l1{ transform: rotateY(-300deg) translatez(5px); -moz-transform: rotateY(-300deg) translatez(5px); -webkit-transform: rotateY(-300deg) translatez(5px); transform-origin: top center; background:#F2D1AB; animation:rotar5 3s linear infinite; -moz-animation:rotar5 3s linear infinite; -webkit-animation:rotar5 3s linear infinite;} .l2{ transform: rotateY(-300deg) translatez(6px); -moz-transform: rotateY(-300deg) translatez(6px); -webkit-transform: rotateY(-300deg) translatez(6px); transform-origin: top center; background:#F4C084; animation:rotar6 3s linear infinite; -moz-animation:rotar6 3s linear infinite; -webkit-animation:rotar6 3s linear infinite;} .l3{ transform: rotateY(-300deg) translatez(7px); -moz-transform: rotateY(-300deg) translatez(7px); -webkit-transform: rotateY(-300deg) translatez(7px); transform-origin: top center; background:#F4C084; animation:rotar7 3s linear infinite; -moz-animation:rotar7 3s linear infinite; -webkit-animation:rotar7 3s linear infinite;} .l4{ transform: rotateY(-300deg) translatez(8px); -moz-transform: rotateY(-300deg) translatez(8px); -webkit-transform: rotateY(-300deg) translatez(8px); transform-origin: top center; background:#F4C084; animation:rotar8 3s linear infinite; -moz-animation:rotar8 3s linear infinite; -webkit-animation:rotar8 3s linear infinite; } .l5{ transform: rotateY(-300deg) translatez(9px); -moz-transform: rotateY(-300deg) translatez(9px); -webkit-transform: rotateY(-300deg) translatez(9px); transform-origin: top center; background:#F4C084; animation:rotar9 3s linear infinite; -moz-animation:rotar9 3s linear infinite; -webkit-animation:rotar9 3s linear infinite;} .l6{ transform: rotateY(-300deg) translatez(10px); -moz-transform: rotateY(-300deg) translatez(10px); -webkit-transform: rotateY(-300deg) translatez(10px); transform-origin: top center; background:#F4C084; animation:rotar10 3s linear infinite; -moz-animation:rotar10 3s linear infinite; -webkit-animation:rotar10 3s linear infinite;} .l7{ transform: rotateY(-300deg) translatez(11px); -moz-transform: rotateY(-300deg) translatez(11px); -webkit-transform: rotateY(-300deg) translatez(11px); transform-origin: top center; background:#F4C084; animation:rotar11 3s linear infinite; -moz-animation:rotar11 3s linear infinite; -webkit-animation:rotar11 3s linear infinite;} .l8{ transform: rotateY(-300deg) translatez(12px); -moz-transform: rotateY(-300deg) translatez(12px); -webkit-transform: rotateY(-300deg) translatez(12px); transform-origin: top center; background:#F2D1AB; animation:rotar12 3s linear infinite; -moz-animation:rotar12 3s linear infinite; -webkit-animation:rotar12 3s linear infinite;} .viento{ position:absolute; width:3px; height:70px; background:white; margin:330px 251px; animation:sube3 3s alternate infinite; -moz-animation:sube3 3s alternate infinite; -webkit-animation:sube3 3s alternate infinite; } .viento3{ position:absolute; width:3px; height:60px; background:white; margin:330px 241px; animation:sube5 3s alternate infinite; -moz-animation:sube5 3s alternate infinite; -webkit-animation:sube5 3s alternate infinite; } .viento5{ position:absolute; width:3px; height:60px; background:white; margin:312px 231px; animation:sube7 3s alternate infinite; -moz-animation:sube7 3s alternate infinite; -webkit-animation:sube7 3s alternate infinite; } .nube{ position:absolute; width:50px; height:50px; border-radius:100%; background:white; margin:192px 70px; animation:sube9 3s alternate infinite; -moz-animation:sube9 3s alternate infinite; -webkit-animation:sube9 3s alternate infinite; } .nube::before{ content:""; display:block; width:40px; height:40px; border-radius:100%; background:white; margin:21px -12px; } .nube::after{ content:""; display:block; width:45px; height:45px; border-radius:100%; background:white; margin:-60px 21px; } .nube3{ position:absolute; width:50px; height:50px; border-radius:100%; background:white; margin:192px 370px; animation:sube12 3s alternate infinite; -moz-animation:sube12 3s alternate infinite; -webkit-animation:sube12 3s alternate infinite; } .nube3::before{ content:""; display:block; width:40px; height:40px; border-radius:100%; background:white; margin:21px -12px; } .nube3::after{ content:""; display:block; width:45px; height:45px; border-radius:100%; background:white; margin:-60px 21px; } @keyframes rotar1{ 0%{ transform: rotateY(0deg) translatez(1px); -moz-transform: rotateY(0deg) translatez(1px); -webkit-transform: rotateY(0deg) translatez(1px);} 100%{ transform: rotateY(-360deg) translatez(1px); -moz-transform: rotateY(-360deg) translatez(1px); -webkit-transform: rotateY(-360deg) translatez(1px);} } @-moz-keyframes rotar1{ 0%{ transform: rotateY(0deg) translatez(1px); -moz-transform: rotateY(0deg) translatez(1px); -webkit-transform: rotateY(0deg) translatez(1px);} 100%{ transform: rotateY(-360deg) translatez(1px); -moz-transform: rotateY(-360deg) translatez(1px); -webkit-transform: rotateY(-360deg) translatez(1px);} } @-webkit-keyframes rotar1{ 0%{ transform: rotateY(0deg) translatez(1px); -moz-transform: rotateY(0deg) translatez(1px); -webkit-transform: rotateY(0deg) translatez(1px);} 100%{ transform: rotateY(-360deg) translatez(1px); -moz-transform: rotateY(-360deg) translatez(1px); -webkit-transform: rotateY(-360deg) translatez(1px);} } @keyframes rotar2 { 0%{ transform: rotateY(0deg) translatez(2px); -moz-transform: rotateY(0deg) translatez(2px); -webkit-transform: rotateY(0deg) translatez(2px);} 100%{ transform: rotateY(-360deg) translatez(2px); -moz-transform: rotateY(-360deg) translatez(2px); -webkit-transform: rotateY(-360deg) translatez(2px);} } @-moz-keyframes rotar2 { 0%{ transform: rotateY(0deg) translatez(2px); -moz-transform: rotateY(0deg) translatez(2px); -webkit-transform: rotateY(0deg) translatez(2px);} 100%{ transform: rotateY(-360deg) translatez(2px); -moz-transform: rotateY(-360deg) translatez(2px); -webkit-transform: rotateY(-360deg) translatez(2px);} } @-webkit-keyframes rotar2 { 0%{ transform: rotateY(0deg) translatez(2px); -moz-transform: rotateY(0deg) translatez(2px); -webkit-transform: rotateY(0deg) translatez(2px);} 100%{ transform: rotateY(-360deg) translatez(2px); -moz-transform: rotateY(-360deg) translatez(2px); -webkit-transform: rotateY(-360deg) translatez(2px);} } @keyframes rotar3{ 0%{ transform: rotateY(0deg) translatez(3px); -moz-transform: rotateY(0deg) translatez(3px); -webkit-transform: rotateY(0deg) translatez(3px);} 100%{ transform: rotateY(-360deg) translatez(3px); -moz-transform: rotateY(-360deg) translatez(3px); -webkit-transform: rotateY(-360deg) translatez(3px);} } @-moz-keyframes rotar3{ 0%{ transform: rotateY(0deg) translatez(3px); -moz-transform: rotateY(0deg) translatez(3px); -webkit-transform: rotateY(0deg) translatez(3px);} 100%{ transform: rotateY(-360deg) translatez(3px); -moz-transform: rotateY(-360deg) translatez(3px); -webkit-transform: rotateY(-360deg) translatez(3px);} } @-webkit-keyframes rotar3{ 0%{ transform: rotateY(0deg) translatez(3px); -moz-transform: rotateY(0deg) translatez(3px); -webkit-transform: rotateY(0deg) translatez(3px);} 100%{ transform: rotateY(-360deg) translatez(3px); -moz-transform: rotateY(-360deg) translatez(3px); -webkit-transform: rotateY(-360deg) translatez(3px);} } @keyframes rotar4 { 0%{ transform: rotateY(0deg) translatez(4px); -moz-transform: rotateY(0deg) translatez(4px); -webkit-transform: rotateY(0deg) translatez(4px);} 100%{ transform: rotateY(-360deg) translatez(4px); -moz-transform: rotateY(-360deg) translatez(4px); -webkit-transform: rotateY(-360deg) translatez(4px);} } @-moz-keyframes rotar4 { 0%{ transform: rotateY(0deg) translatez(4px); -moz-transform: rotateY(0deg) translatez(4px); -webkit-transform: rotateY(0deg) translatez(4px);} 100%{ transform: rotateY(-360deg) translatez(4px); -moz-transform: rotateY(-360deg) translatez(4px); -webkit-transform: rotateY(-360deg) translatez(4px);} } @-webkit-keyframes rotar4 { 0%{ transform: rotateY(0deg) translatez(4px); -moz-transform: rotateY(0deg) translatez(4px); -webkit-transform: rotateY(0deg) translatez(4px);} 100%{ transform: rotateY(-360deg) translatez(4px); -moz-transform: rotateY(-360deg) translatez(4px); -webkit-transform: rotateY(-360deg) translatez(4px);} } @keyframes rotar5 { 0%{ transform: rotateY(0deg) translatez(5px); -moz-transform: rotateY(0deg) translatez(5px); -webkit-transform: rotateY(0deg) translatez(5px);} 100%{ transform: rotateY(-360deg) translatez(5px); -moz-transform: rotateY(-360deg) translatez(5px); -webkit-transform: rotateY(-360deg) translatez(5px);} } @-moz-keyframes rotar5 { 0%{ transform: rotateY(0deg) translatez(5px); -moz-transform: rotateY(0deg) translatez(5px); -webkit-transform: rotateY(0deg) translatez(5px);} 100%{ transform: rotateY(-360deg) translatez(5px); -moz-transform: rotateY(-360deg) translatez(5px); -webkit-transform: rotateY(-360deg) translatez(5px);} } @-webkit-keyframes rotar5 { 0%{ transform: rotateY(0deg) translatez(5px); -moz-transform: rotateY(0deg) translatez(5px); -webkit-transform: rotateY(0deg) translatez(5px);} 100%{ transform: rotateY(-360deg) translatez(5px); -moz-transform: rotateY(-360deg) translatez(5px); -webkit-transform: rotateY(-360deg) translatez(5px);} } @keyframes rotar6{ 0%{ transform: rotateY(0deg) translatez(6px); -moz-transform: rotateY(0deg) translatez(6px); -webkit-transform: rotateY(0deg) translatez(6px);} 100%{ transform: rotateY(-360deg) translatez(6px); -moz-transform: rotateY(-360deg) translatez(6px); -webkit-transform: rotateY(-360deg) translatez(6px);} } @-moz-keyframes rotar6{ 0%{ transform: rotateY(0deg) translatez(6px); -moz-transform: rotateY(0deg) translatez(6px); -webkit-transform: rotateY(0deg) translatez(6px);} 100%{ transform: rotateY(-360deg) translatez(6px); -moz-transform: rotateY(-360deg) translatez(6px); -webkit-transform: rotateY(-360deg) translatez(6px);} } @-webkit-keyframes rotar6{ 0%{ transform: rotateY(0deg) translatez(6px); -moz-transform: rotateY(0deg) translatez(6px); -webkit-transform: rotateY(0deg) translatez(6px);} 100%{ transform: rotateY(-360deg) translatez(6px); -moz-transform: rotateY(-360deg) translatez(6px); -webkit-transform: rotateY(-360deg) translatez(6px);} } @keyframes rotar7 { 0%{ transform: rotateY(0deg) translatez(7px); -moz-transform: rotateY(0deg) translatez(7px); -webkit-transform: rotateY(0deg) translatez(7px);} 100%{ transform: rotateY(-360deg) translatez(7px); -moz-transform: rotateY(-360deg) translatez(7px); -webkit-transform: rotateY(-360deg) translatez(7px);} } @-moz-keyframes rotar7 { 0%{ transform: rotateY(0deg) translatez(7px); -moz-transform: rotateY(0deg) translatez(7px); -webkit-transform: rotateY(0deg) translatez(7px);} 100%{ transform: rotateY(-360deg) translatez(7px); -moz-transform: rotateY(-360deg) translatez(7px); -webkit-transform: rotateY(-360deg) translatez(7px);} } @-webkit-keyframes rotar7 { 0%{ transform: rotateY(0deg) translatez(7px); -moz-transform: rotateY(0deg) translatez(7px); -webkit-transform: rotateY(0deg) translatez(7px);} 100%{ transform: rotateY(-360deg) translatez(7px); -moz-transform: rotateY(-360deg) translatez(7px); -webkit-transform: rotateY(-360deg) translatez(7px);} } @keyframes rotar8 { 0%{ transform: rotateY(0deg) translatez(8px); -moz-transform: rotateY(0deg) translatez(8px); -webkit-transform: rotateY(0deg) translatez(8px);} 100%{ transform: rotateY(-360deg) translatez(8px); -moz-transform: rotateY(-360deg) translatez(8px); -webkit-transform: rotateY(-360deg) translatez(8px);} } @-moz-keyframes rotar8 { 0%{ transform: rotateY(0deg) translatez(8px); -moz-transform: rotateY(0deg) translatez(8px); -webkit-transform: rotateY(0deg) translatez(8px);} 100%{ transform: rotateY(-360deg) translatez(8px); -moz-transform: rotateY(-360deg) translatez(8px); -webkit-transform: rotateY(-360deg) translatez(8px);} } @-webkit-keyframes rotar8 { 0%{ transform: rotateY(0deg) translatez(8px); -moz-transform: rotateY(0deg) translatez(8px); -webkit-transform: rotateY(0deg) translatez(8px);} 100%{ transform: rotateY(-360deg) translatez(8px); -moz-transform: rotateY(-360deg) translatez(8px); -webkit-transform: rotateY(-360deg) translatez(8px);} } @keyframes rotar9 { 0%{ transform: rotateY(0deg) translatez(9px); -moz-transform: rotateY(0deg) translatez(9px); -webkit-transform: rotateY(0deg) translatez(9px);} 100%{ transform: rotateY(-360deg) translatez(9px); -moz-transform: rotateY(-360deg) translatez(9px); -webkit-transform: rotateY(-360deg) translatez(9px);} } @-moz-keyframes rotar9 { 0%{ transform: rotateY(0deg) translatez(9px); -moz-transform: rotateY(0deg) translatez(9px); -webkit-transform: rotateY(0deg) translatez(9px);} 100%{ transform: rotateY(-360deg) translatez(9px); -moz-transform: rotateY(-360deg) translatez(9px); -webkit-transform: rotateY(-360deg) translatez(9px);} } @-webkit-keyframes rotar9 { 0%{ transform: rotateY(0deg) translatez(9px); -moz-transform: rotateY(0deg) translatez(9px); -webkit-transform: rotateY(0deg) translatez(9px);} 100%{ transform: rotateY(-360deg) translatez(9px); -moz-transform: rotateY(-360deg) translatez(9px); -webkit-transform: rotateY(-360deg) translatez(9px);} } @keyframes rotar10 { 0%{ transform: rotateY(0deg) translatez(10px); -moz-transform: rotateY(0deg) translatez(10px); -webkit-transform: rotateY(0deg) translatez(10px);} 100%{ transform: rotateY(-360deg) translatez(10px); -moz-transform: rotateY(-360deg) translatez(10px); -webkit-transform: rotateY(-360deg) translatez(10px);} } @-moz-keyframes rotar10 { 0%{ transform: rotateY(0deg) translatez(10px); -moz-transform: rotateY(0deg) translatez(10px); -webkit-transform: rotateY(0deg) translatez(10px);} 100%{ transform: rotateY(-360deg) translatez(10px); -moz-transform: rotateY(-360deg) translatez(10px); -webkit-transform: rotateY(-360deg) translatez(10px);} } @-webkit-keyframes rotar10 { 0%{ transform: rotateY(0deg) translatez(10px); -moz-transform: rotateY(0deg) translatez(10px); -webkit-transform: rotateY(0deg) translatez(10px);} 100%{ transform: rotateY(-360deg) translatez(10px); -moz-transform: rotateY(-360deg) translatez(10px); -webkit-transform: rotateY(-360deg) translatez(10px);} } @keyframes rotar11 { 0%{ transform: rotateY(0deg) translatez(11px); -moz-transform: rotateY(0deg) translatez(11px); -webkit-transform: rotateY(0deg) translatez(11px);} 100%{ transform: rotateY(-360deg) translatez(11px); -moz-transform: rotateY(-360deg) translatez(11px); -webkit-transform: rotateY(-360deg) translatez(11px);} } @-moz-keyframes rotar11 { 0%{ transform: rotateY(0deg) translatez(11px); -moz-transform: rotateY(0deg) translatez(11px); -webkit-transform: rotateY(0deg) translatez(11px);} 100%{ transform: rotateY(-360deg) translatez(11px); -moz-transform: rotateY(-360deg) translatez(11px); -webkit-transform: rotateY(-360deg) translatez(11px);} } @-webkit-keyframes rotar11 { 0%{ transform: rotateY(0deg) translatez(11px); -moz-transform: rotateY(0deg) translatez(11px); -webkit-transform: rotateY(0deg) translatez(11px);} 100%{ transform: rotateY(-360deg) translatez(11px); -moz-transform: rotateY(-360deg) translatez(11px); -webkit-transform: rotateY(-360deg) translatez(11px);} } @keyframes rotar12 { 0%{ transform: rotateY(0deg) translatez(12px); -moz-transform: rotateY(0deg) translatez(12px); -webkit-transform: rotateY(0deg) translatez(12px);} 100%{ transform: rotateY(-360deg) translatez(12px); -moz-transform: rotateY(-360deg) translatez(12px); -webkit-transform: rotateY(-360deg) translatez(12px);} } @-moz-keyframes rotar12 { 0%{ transform: rotateY(0deg) translatez(12px); -moz-transform: rotateY(0deg) translatez(12px); -webkit-transform: rotateY(0deg) translatez(12px);} 100%{ transform: rotateY(-360deg) translatez(12px); -moz-transform: rotateY(-360deg) translatez(12px); -webkit-transform: rotateY(-360deg) translatez(12px);} } @-webkit-keyframes rotar12 { 0%{ transform: rotateY(0deg) translatez(12px); -moz-transform: rotateY(0deg) translatez(12px); -webkit-transform: rotateY(0deg) translatez(12px);} 100%{ transform: rotateY(-360deg) translatez(12px); -moz-transform: rotateY(-360deg) translatez(12px); -webkit-transform: rotateY(-360deg) translatez(12px);} } @keyframes rotar13 { 0%{ transform: rotateY(0deg) translatez(13px); -moz-transform: rotateY(0deg) translatez(13px); -webkit-transform: rotateY(0deg) translatez(13px);} 100%{ transform: rotateY(-360deg) translatez(13px); -moz-transform: rotateY(-360deg) translatez(13px); -webkit-transform: rotateY(-360deg) translatez(13px);} } @-moz-keyframes rotar13 { 0%{ transform: rotateY(0deg) translatez(13px); -moz-transform: rotateY(0deg) translatez(13px); -webkit-transform: rotateY(0deg) translatez(13px);} 100%{ transform: rotateY(-360deg) translatez(13px); -moz-transform: rotateY(-360deg) translatez(13px); -webkit-transform: rotateY(-360deg) translatez(13px);} } @-webkit-keyframes rotar13 { 0%{ transform: rotateY(0deg) translatez(13px); -moz-transform: rotateY(0deg) translatez(13px); -webkit-transform: rotateY(0deg) translatez(13px);} 100%{ transform: rotateY(-360deg) translatez(13px); -moz-transform: rotateY(-360deg) translatez(13px); -webkit-transform: rotateY(-360deg) translatez(13px);} } @keyframes rotar14 { 0%{ transform: rotateY(0deg) translatez(14px); -moz-transform: rotateY(0deg) translatez(14px); -webkit-transform: rotateY(0deg) translatez(14px);} 100%{ transform: rotateY(-360deg) translatez(14px); -moz-transform: rotateY(-360deg) translatez(14px); -webkit-transform: rotateY(-360deg) translatez(14px);} } @-moz-keyframes rotar14 { 0%{ transform: rotateY(0deg) translatez(14px); -moz-transform: rotateY(0deg) translatez(14px); -webkit-transform: rotateY(0deg) translatez(14px);} 100%{ transform: rotateY(-360deg) translatez(14px); -moz-transform: rotateY(-360deg) translatez(14px); -webkit-transform: rotateY(-360deg) translatez(14px);} } @-webkit-keyframes rotar14 { 0%{ transform: rotateY(0deg) translatez(14px); -moz-transform: rotateY(0deg) translatez(14px); -webkit-transform: rotateY(0deg) translatez(14px);} 100%{ transform: rotateY(-360deg) translatez(14px); -moz-transform: rotateY(-360deg) translatez(14px); -webkit-transform: rotateY(-360deg) translatez(14px);} } @keyframes rotar15 { 0%{ transform: rotateY(0deg) translatez(15px); -moz-transform: rotateY(0deg) translatez(15px); -webkit-transform: rotateY(0deg) translatez(15px);} 100%{ transform: rotateY(-360deg) translatez(15px); -moz-transform: rotateY(-360deg) translatez(15px); -webkit-transform: rotateY(-360deg) translatez(15px);} } @-moz-keyframes rotar15 { 0%{ transform: rotateY(0deg) translatez(15px); -moz-transform: rotateY(0deg) translatez(15px); -webkit-transform: rotateY(0deg) translatez(15px);} 100%{ transform: rotateY(-360deg) translatez(15px); -moz-transform: rotateY(-360deg) translatez(15px); -webkit-transform: rotateY(-360deg) translatez(15px);} } @-webkit-keyframes rotar15 { 0%{ transform: rotateY(0deg) translatez(15px); -moz-transform: rotateY(0deg) translatez(15px); -webkit-transform: rotateY(0deg) translatez(15px);} 100%{ transform: rotateY(-360deg) translatez(15px); -moz-transform: rotateY(-360deg) translatez(15px); -webkit-transform: rotateY(-360deg) translatez(15px);} } @keyframes rotar16 { 0%{ transform: rotateY(0deg) translatez(16px); -moz-transform: rotateY(0deg) translatez(16px); -webkit-transform: rotateY(0deg) translatez(16px);} 100%{ transform: rotateY(-360deg) translatez(16px); -moz-transform: rotateY(-360deg) translatez(16px); -webkit-transform: rotateY(-360deg) translatez(16px);} } @-moz-keyframes rotar16 { 0%{ transform: rotateY(0deg) translatez(16px); -moz-transform: rotateY(0deg) translatez(16px); -webkit-transform: rotateY(0deg) translatez(16px);} 100%{ transform: rotateY(-360deg) translatez(16px); -moz-transform: rotateY(-360deg) translatez(16px); -webkit-transform: rotateY(-360deg) translatez(16px);} } @-webkit-keyframes rotar16 { 0%{ transform: rotateY(0deg) translatez(16px); -moz-transform: rotateY(0deg) translatez(16px); -webkit-transform: rotateY(0deg) translatez(16px);} 100%{ transform: rotateY(-360deg) translatez(16px); -moz-transform: rotateY(-360deg) translatez(16px); -webkit-transform: rotateY(-360deg) translatez(16px);} } @keyframes rotar17 { 0%{ transform: rotateY(0deg) translatez(17px); -moz-transform: rotateY(0deg) translatez(17px); -webkit-transform: rotateY(0deg) translatez(17px);} 100%{ transform: rotateY(-360deg) translatez(17px); -moz-transform: rotateY(-360deg) translatez(17px); -webkit-transform: rotateY(-360deg) translatez(17px);} } @-moz-keyframes rotar17 { 0%{ transform: rotateY(0deg) translatez(17px); -moz-transform: rotateY(0deg) translatez(17px); -webkit-transform: rotateY(0deg) translatez(17px);} 100%{ transform: rotateY(-360deg) translatez(17px); -moz-transform: rotateY(-360deg) translatez(17px); -webkit-transform: rotateY(-360deg) translatez(17px);} } @-webkit-keyframes rotar17 { 0%{ transform: rotateY(0deg) translatez(17px); -moz-transform: rotateY(0deg) translatez(17px); -webkit-transform: rotateY(0deg) translatez(17px);} 100%{ transform: rotateY(-360deg) translatez(17px); -moz-transform: rotateY(-360deg) translatez(17px); -webkit-transform: rotateY(-360deg) translatez(17px);} } @keyframes rotar18 { 0%{ transform: rotateY(0deg) translatez(18px); -moz-transform: rotateY(0deg) translatez(18px); -webkit-transform: rotateY(0deg) translatez(18px);} 100%{ transform: rotateY(-360deg) translatez(18px); -moz-transform: rotateY(-360deg) translatez(18px); -webkit-transform: rotateY(-360deg) translatez(18px);} } @-moz-keyframes rotar18 { 0%{ transform: rotateY(0deg) translatez(18px); -moz-transform: rotateY(0deg) translatez(18px); -webkit-transform: rotateY(0deg) translatez(18px);} 100%{ transform: rotateY(-360deg) translatez(18px); -moz-transform: rotateY(-360deg) translatez(18px); -webkit-transform: rotateY(-360deg) translatez(18px);} } @-webkit-keyframes rotar18 { 0%{ transform: rotateY(0deg) translatez(18px); -moz-transform: rotateY(0deg) translatez(18px); -webkit-transform: rotateY(0deg) translatez(18px);} 100%{ transform: rotateY(-360deg) translatez(18px); -moz-transform: rotateY(-360deg) translatez(18px); -webkit-transform: rotateY(-360deg) translatez(18px);} } @keyframes rotar19 { 0%{ transform: rotateY(0deg) translatez(19px); -moz-transform: rotateY(0deg) translatez(19px); -webkit-transform: rotateY(0deg) translatez(19px);} 100%{ transform: rotateY(-360deg) translatez(19px); -moz-transform: rotateY(-360deg) translatez(19px); -webkit-transform: rotateY(-360deg) translatez(19px);} } @-moz-keyframes rotar19 { 0%{ transform: rotateY(0deg) translatez(19px); -moz-transform: rotateY(0deg) translatez(19px); -webkit-transform: rotateY(0deg) translatez(19px);} 100%{ transform: rotateY(-360deg) translatez(19px); -moz-transform: rotateY(-360deg) translatez(19px); -webkit-transform: rotateY(-360deg) translatez(19px);} } @-webkit-keyframes rotar19 { 0%{ transform: rotateY(0deg) translatez(19px); -moz-transform: rotateY(0deg) translatez(19px); -webkit-transform: rotateY(0deg) translatez(19px);} 100%{ transform: rotateY(-360deg) translatez(19px); -moz-transform: rotateY(-360deg) translatez(19px); -webkit-transform: rotateY(-360deg) translatez(19px);} } @keyframes rotar20 { 0%{ transform: rotateY(0deg) translatez(20px); -moz-transform: rotateY(0deg) translatez(20px); -webkit-transform: rotateY(0deg) translatez(20px);} 100%{ transform: rotateY(-360deg) translatez(20px); -moz-transform: rotateY(-360deg) translatez(20px); -webkit-transform: rotateY(-360deg) translatez(20px);} } @-moz-keyframes rotar20 { 0%{ transform: rotateY(0deg) translatez(20px); -moz-transform: rotateY(0deg) translatez(20px); -webkit-transform: rotateY(0deg) translatez(20px);} 100%{ transform: rotateY(-360deg) translatez(20px); -moz-transform: rotateY(-360deg) translatez(20px); -webkit-transform: rotateY(-360deg) translatez(20px);} } @-webkit-keyframes rotar20 { 0%{ transform: rotateY(0deg) translatez(20px); -moz-transform: rotateY(0deg) translatez(20px); -webkit-transform: rotateY(0deg) translatez(20px);} 100%{ transform: rotateY(-360deg) translatez(20px); -moz-transform: rotateY(-360deg) translatez(20px); -webkit-transform: rotateY(-360deg) translatez(20px);} } @keyframes rotar21 { 0%{ transform: rotateY(0deg) translatez(21px); -moz-transform: rotateY(0deg) translatez(21px); -webkit-transform: rotateY(0deg) translatez(21px);} 100%{ transform: rotateY(-360deg) translatez(21px); -moz-transform: rotateY(-360deg) translatez(21px); -webkit-transform: rotateY(-360deg) translatez(21px);} } @-moz-keyframes rotar21 { 0%{ transform: rotateY(0deg) translatez(21px); -moz-transform: rotateY(0deg) translatez(21px); -webkit-transform: rotateY(0deg) translatez(21px);} 100%{ transform: rotateY(-360deg) translatez(21px); -moz-transform: rotateY(-360deg) translatez(21px); -webkit-transform: rotateY(-360deg) translatez(21px);} } @-webkit-keyframes rotar21 { 0%{ transform: rotateY(0deg) translatez(21px); -moz-transform: rotateY(0deg) translatez(21px); -webkit-transform: rotateY(0deg) translatez(21px);} 100%{ transform: rotateY(-360deg) translatez(21px); -moz-transform: rotateY(-360deg) translatez(21px); -webkit-transform: rotateY(-360deg) translatez(21px);} } @keyframes sube{ 0%{margin:152px 212px;} 100%{margin:121px 212px;} } @-moz-keyframes sube{ 0%{margin:152px 212px;} 100%{margin:121px 212px;} } @-webkit-keyframes sube{ 0%{margin:152px 212px;} 100%{margin:121px 212px;} } @keyframes sube3{ 0%{margin:330px 251px;width:3px; height:3px} 100%{margin:300px 251px;width:3px; height:70px} } @-moz-keyframes sube3{ 0%{margin:330px 251px;width:3px; height:3px} 100%{margin:300px 251px;width:3px; height:70px} } @-webkit-keyframes sube3{ 0%{margin:330px 251px;width:3px; height:3px} 100%{margin:300px 251px;width:3px; height:70px} } @keyframes sube5{ 0%{margin:321px 241px;width:3px; height:30px} 100%{margin:312px 241px;width:3px; height:12px} } @-moz-keyframes sube5{ 0%{margin:321px 241px;width:3px; height:30px} 100%{margin:312px 241px;width:3px; height:12px} } @-webkit-keyframes sube5{ 0%{margin:321px 241px;width:3px; height:30px} 100%{margin:312px 241px;width:3px; height:12px} } @keyframes sube7 { 0%{margin:330px 231px;width:3px; height:30px} 100%{margin:300px 231px;width:3px; height:50px} } @-moz-keyframes sube7 { 0%{margin:330px 231px;width:3px; height:30px} 100%{margin:300px 231px;width:3px; height:50px} } @-webkit-keyframes sube7 { 0%{margin:330px 231px;width:3px; height:30px} 100%{margin:300px 231px;width:3px; height:50px} } @keyframes sube9 { 0%{margin:152px 70px;} 100%{margin:231px 70px;} } @-moz-keyframes sube9 { 0%{margin:152px 70px;} 100%{margin:231px 70px;} } @-webkit-keyframes sube9 { 0%{margin:152px 70px;} 100%{margin:231px 70px;} } @keyframes sube12 { 0%{margin:231px 370px;} 100%{margin:152px 370px;} } @-moz-keyframes sube12 { 0%{margin:231px 370px;} 100%{margin:152px 370px;} } @-webkit-keyframes sube12 { 0%{margin:231px 370px;} 100%{margin:152px 370px;} }
JAVASCRIPT
Expand for more options Login