.fl-animated.fl-spin {
  -webkit-animation-name: fl-spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: fl-spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: 2;
  -moz-animation-timing-function: linear;
  -ms-animation-name: fl-spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: 2;
  -ms-animation-timing-function: linear;

  animation-name: fl-spin;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
@-ms-keyframes fl-spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes fl-spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes fl-spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes fl-spin {
  0% {
    transform:rotate(0deg) scaleX(0.0) scaleY(0.0) ;
  }
  20% {
    transform:rotate(180deg) ;
  }
  40% {
    transform:rotate(360deg);
  }
  60% {
    transform:rotate(0deg);
  }
  80% {
    transform:rotate(180deg);
  }
  100% {
    transform:rotate(360deg) scaleX(1.0) scaleY(1.0) ;
  }
}



@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) scaleX(0.86) scaleY(0.40) ;
  }
  21% {
    transform:  translate(42px,0px)  rotate(38deg) ;
  }
  100% {
    transform:  translate(200px,0px)  rotate(180deg) scaleX(0.86) scaleY(0.40) ;
  }
}