Animation Simple Loading

animation-simple-loading.markdown

Animation Simple Loading

A Pen por Yerlin Matu on CodePen.

License.

index.html

<div class="figura"></div>

style.scss

@mixin Forma($anchoX, $altoY){
   width:$anchoX;
   height:$altoY;
}
@mixin Fondo($color){
   background-color:$color;
}
.figura {
   @include Forma(200px, 200px);
   @include Fondo(Salmon);
   position:absolute;
   margin:0 auto;
   display:block;
   top:30%;
   left:45%;
   animation-duration:3s;
   transform-style: preserve-3d;
   animation-name:Girar;
   animation-iteration-count:infinite;
}

@-webkit-keyframes Girar{
  from{
     -webkit-transform: rotateY(0deg);
    
      }
  to {
      -webkit-transform: rotateY(-360deg);
      background-color:Skyblue;
      
       
   }
}