/* Copyright (c) 2016 ZipSocket, Inc.  */
/* All rights reserved.      */

/* try to put all the non-trivial animations in this file */

.animateFadeInFast {
   animation: fadeInKey .2s 0s 1 ease-in normal forwards;
}


.animateFadeOutFast {
   animation: fadeOutKey .2s 0s 1 ease-in normal forwards;
}

.animateFadeInSlow {
   animation: fadeInKey 1s 0s 1 ease-in normal forwards;
}

.animateFadOutSlow {
   animation: fadeOutKey 1s 0s 1 ease-in normal forwards;
}

.animateStatusPulse {
   animation: statusPulseKey 1s 0s 1 ease-in-out normal forwards;
}

.animate0to180 {
   /* duration should match controlPanelExpander top */
   animation: rotate0to180Key .7s 0s 1 ease-in-out normal forwards;
}

.animate180to360 {
   animation: rotate180to360Key .7s 0s 1 ease-out normal forwards;
}

.animatePulseScale {
   animation: shrinkPulseKey 0.7s 0s 1 ease-in-out normal forwards;
}

.animateRotateClockwise {
  animation-name: rotateClockwiseKey;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/*--- Keyframes ---*/


@keyframes cpFadeInKey {
   0% {
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 1;
   }
}

@keyframes cpFadeOutKey {
   0% {
      opacity: 1;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

@keyframes fadeInKey {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@keyframes fadeOutKey {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}


@keyframes statusPulseKey {
   0% {
      color: #DDD;
   }
   20% {
      color: #3AACD6;
   }
   100% {
      color: #DDD;
   }
}

@keyframes shrinkPulseKey {
   0% {
      transform: scale(1);
   }
   50% {
      transform: scale(.7);
   }
   100% {
      transform: scale(1);
   }
}


@keyframes rotate0to180Key {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(180deg);
   }
}

@keyframes rotate180to360Key {
   0% {
      transform: rotate(180deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

@keyframes rotateClockwiseKey {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}