cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
<div class="loro">
<div class="circ">
 
</div>
<div class="circ3"></div>
<div class="circ5"></div>

  <div class="circ7"></div>
  <div class="ojo"></div>
  </div>
  <div>
            
          
!
            
              *{
  margin:0;
  padding:0;
}

body{
  background:#18233e;
}
.container{
  position:relative;
  width:100%;
  height:300px;
  padding-top:0px;
  margin: 121px auto;
  
}
.loro{
  position:relative;
  width:231px;
  height:300px;
  margin:0 auto;
  
    
}
.circ{
  position:absolute;
  width:121px;
  height:212px;
  border-radius: 300px 0  0 300px;
  background:#25b1b0;
  margin:30px 50%;
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
   animation:gira 3s linear infinite;
    -moz-animation: gira 3s alternate infinite;
    -webkit-animation: gira 3s linear infinite;
    -o-animation: gira 3s alternate infinite;
  
  
}
.circ3{
  position:absolute;
  display:block;
  width:80px;
  height:45px;
  border-radius:0 0 90px 90px;
 background:#f7a500;
  margin:121px 192px;
  transform-origin:-21% 53%;
   -webkit-transform-origin:-21% 53%;
  -moz-transform-origin:-21% 53%;
   animation:gira5 3s linear infinite;
    -moz-animation: gira5 3s linear infinite;
    -webkit-animation: gira5 3s linear infinite;
    -o-animation: gira5 3s linear infinite;
  
}
.circ5{
  position:absolute;
  
  width:75px;
  height:121px;
  border-radius:90px 0 0 90px ;
  background:white;
  margin:70px 161px;
   transform-origin:19% 50%;
  -webkit-transform-origin:19% 50%;
  -moz-transform-origin:19% 50%;
   animation:gira3 3s linear infinite;
    -moz-animation: gira3 3s linear infinite;
    -webkit-animation: gira3 3s linear infinite;
    -o-animation: gira3 3s linear infinite;
	
}
.ojo{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#333;
  border:3px solid #ff6666;
  margin:90px 192px;
   animation:va 3s linear infinite;
    -moz-animation: va 3s linear infinite;
    -webkit-animation:va 3s linear infinite;
    -o-animation: va 3s linear infinite;
  z-index:33;
  
}
.circ7{
  position:absolute;
  width:55px;
  height:60px;
  border-radius:0 192px 0 0;
  background:#f7ce43;
  margin:70px 235px;
    transform-origin:102% 207%;
  -webkit-transform-origin:-102% 207%;
  -moz-transform-origin:-102% 207%;
 
   animation:gira7 3s linear infinite;
    -moz-animation: gira7 3s linear infinite;
    -webkit-animation: gira7 3s linear infinite;
    -o-animation: gira7 3s linear infinite;
}

@-webkit-keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}


@keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}
@-moz-keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}

@-webkit-keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}


@keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}

@-moz-keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}
@-webkit-keyframes gira5 {
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   border-radius:0 0 90px 90px;}
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);border-radius:0 0 90px 90px; }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
  }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
   border-radius:90px 90px 0 0;}
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); 
   border-radius:0 0 90px 90px;}
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px; }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
}
@keyframes gira5 {
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   border-radius:0 0 90px 90px;}
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);border-radius:0 0 90px 90px; }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
  }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
   border-radius:90px 90px 0 0;}
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); 
   border-radius:0 0 90px 90px;}
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px; }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
}

@-moz-keyframes gira5 {
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   border-radius:0 0 90px 90px;}
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);border-radius:0 0 90px 90px; }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
  }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
     border-radius:90px 90px 0 0;
   }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
   border-radius:90px 90px 0 0;}
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); 
   border-radius:0 0 90px 90px;}
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); border-radius:0 0 90px 90px;   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px; }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  border-radius:0 0 90px 90px;  }
}
@-webkit-keyframes gira7{
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
  }
  55% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
   }
  60% {transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
     
   }
  65% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);;
  }
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
    -ms-transform: rotate(0deg); }
 
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);}}
  

@keyframes gira7{
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
  }
  55% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
   }
  60% {transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
     
   }
  65% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);;
  }
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
    -ms-transform: rotate(0deg); }
 
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);}}

@-moz-keyframes gira7{
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
   }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
  }
  55% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    
   }
  60% {transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
     
   }
  65% {  transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);;
  }
  75% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
    -ms-transform: rotate(0deg); }
 
  80% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
 85% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
 90% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  95% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);  
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);   }
  100%{transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);}}


  @keyframes va{
    0% {margin-left:192px;}
    25% {margin-left:192px;}
  50% { margin-left:121px; }
  55% {  margin-left:121px;}
  60% {margin-left:121px;}
  65% {  margin-left:121px;}
    75% {margin-left:192px;}
 
  80% {margin-left:192px; }
 85% {margin-left:192px;  }
 90% {margin-left:192px;   }
  95% {margin-left:192px;  }
    100%{margin-left:192px;}}
  
  
  
  
  @-moz-keyframes va{
     0% {margin-left:192px;}
    25% {margin-left:192px;}
  50% { margin-left:121px; }
  55% {  margin-left:121px;}
  60% {margin-left:121px;}
  65% {  margin-left:121px;}
    75% {margin-left:192px;}
 
  80% {margin-left:192px; }
 85% {margin-left:192px;  }
 90% {margin-left:192px;   }
  95% {margin-left:192px;  }
    100%{margin-left:192px;}}
  
  
  
  @-webkit-keyframes va {
    0% {margin-left:192px;}
    25% {margin-left:192px;}
  50% { margin-left:121px; }
  55% {  margin-left:121px;}
  60% {margin-left:121px;}
  65% {  margin-left:121px;}
    75% {margin-left:192px;}
 
  80% {margin-left:192px; }
 85% {margin-left:192px;  }
 90% {margin-left:192px;   }
  95% {margin-left:192px;  }
    100%{margin-left:192px;}}
  
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console