animations.less

/* This file contains css3 animation code

Please read this, before playing with it:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

tl;dr is:
"
  Today transforms are the best properties to animate because the GPU
  can assist with the heavy lifting, so where you can limit your animations to these, do so.

  opacity
  translate
  rotate
  scale
"
*/

/* animation for alert boxes. */

.anim-alert {
  &.ng-leave {
    transition: all 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
  }
  &.ng-enter{
    transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
  }
  &.ng-leave.ng-leave-active,
  &.ng-enter {
    opacity: 0;
    transform: translateY(-70px);
    -webkit-transform: translateY(-70px);
  }
  &.ng-enter.ng-enter-active,
  &.ng-leave {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0px);
  }
}

/* animation for validation tooltips in force forms */
.anim-popover {
  &.ng-enter,
  &.ng-leave{
    transition: all 500ms cubic-bezier(0.000, 0.915, 0.480, 0.995);
   /* The animation preparation code */
  }
  &.ng-enter,
  &.ng-leave.ng-leave-active {
   /* The animation code itself */
    opacity: 0;
    transform: translateY(-150px) scale(.2);
    -webkit-transform: translateY(-150px) scale(.2);
  }
  &.ng-leave,
  &.ng-enter.ng-enter-active {
   /* The animation code itself */
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
  }
}

/* steps details animation */
.anim-stepdetails {
  &.ng-hide-add,
  &.ng-hide-remove{
    display:block!important;
    transition: all 200ms cubic-bezier(0.000, 0.915, 0.480, 0.995);
   /* The animation preparation code */
  }
 /* The animation code itself */
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  &.ng-hide{
   /* The animation code itself */
    opacity: 0;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    }
}

/* rotate animation for fold-unfold of details */
.rotate {
      transition: -webkit-transform 100ms;
      transition: transform 100ms;
  &.rotate-90 {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
  &.rotate-0{
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
  }
}

/* heart-like pulse animation, used to show live stuff like current builds */
@-webkit-keyframes pulse_animation {
    0% { -webkit-transform: scale(0.9); }
    30% { -webkit-transform: scale(0.9); }
    40% { -webkit-transform: scale(1.08); }
    50% { -webkit-transform: scale(0.9); }
    60% { -webkit-transform: scale(0.9); }
    70% { -webkit-transform: scale(1.05); }
    80% { -webkit-transform: scale(0.9); }
    100% { -webkit-transform: scale(0.9); }
}
@keyframes pulse_animation {
    0% { transform: scale(0.9); }
    30% { transform: scale(0.9); }
    40% { transform: scale(1.08); }
    50% { transform: scale(0.9); }
    60% { transform: scale(0.9); }
    70% { transform: scale(1.05); }
    80% { transform: scale(0.9); }
    100% { transform: scale(0.9); }
}
.pulse {
    -webkit-animation-name: 'pulse_animation';
    -webkit-animation-duration: 1000ms;
    -webkit-transform-origin:70% 70%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: 'pulse_animation';
    animation-duration: 1000ms;
    transform-origin:70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}