@keyframes rotateIcon {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
@-webkit-keyframes rotateIcon {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes showFrame {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform-origin: top center;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes showFrame {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block !important;
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/** buttun default animation **/
@keyframes buttonAni {
  100% {
    transform: scale(0.99);
  }
}
@-webkit-keyframes buttonAni {
  100% {
    transform: scale(0.99);
  }
}

@keyframes backAndForth {
  0% { right: 0px;}
  50%{ right: -5px;}
  100%{ right: 0px;}
}
@-webkit-keyframes backAndForth {
  0% { right: 0px;}
  50%{ right: -5px;}
  100%{ right: 0px;}
}
@keyframes topAndBottom {
  0% { top: -5px;}
  50%{ top: -1px;}
  100%{ top: -5px;}
}
@-webkit-keyframes topAndBottom {
  0% { top: -5px;}
  50%{ top: -1px;}
  100%{ top: -5px;}
}

@keyframes shake {
  from {
    transform: rotate(5deg);
  }
  to {
   transform-origin:center center;
   transform: rotate(-5deg);
  }
}
@-webkit-keyframes shake {
  from {
    -webkit-transform: rotate(5deg);
  }
  to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-5deg);
  }
}

@-webkit-keyframes slide-down {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform-origin: center top;
    -webkit-transform: scale(1, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes slide-down {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform-origin: center top;
    transform: scale(1, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}