_animation.scss

@import "variables";
.fade-enter, .fade-quick-enter, .splash-fade-enter, .fade-slow-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  @include transition-prop(opacity, 300ms, ease-in);
}

.fade-leave.fade-leave-active {
  opacity: 0;
  @include transition-prop(opacity, 300ms, ease-in);
}

.fade-leave, .fade-quick-leave, .splash-fade-leave {
  opacity: 1;
}

.fade-quick-leave.fade-quick-leave-active {
  opacity: 0;
  @include transition-prop(opacity, 200ms, ease-in);
}

.fade-quick-enter.fade-quick-enter-active {
  opacity: 1;
  @include transition-prop(opacity, 200ms, ease-in);
}

.splash-fade-enter.splash-fade-enter-active {
  opacity: 1;
  @include transition-prop(opacity, 200ms, ease-in);
}

.splash-fade-leave.splash-fade-leave-active {
  opacity: 0;
  @include transition-prop(opacity, 600ms, ease-in);
}

.fade-slow-enter.fade-slow-enter-active {
  opacity: 1;
  @include transition-prop(opacity, 600ms, ease-in);
}

.fade-slow-leave.fade-slow-leave-active {
  opacity: 0;
  @include transition-prop(opacity, 600ms, ease-in);
}

.accordion-enter.accordion-active {
  height: 250px;
  @include transition-prop(height, 300ms, ease-in);
}

.accordion-leave.accordion-leave-active {
  height: 0px;
  @include transition-prop(height, 300ms, ease-in);
}

.scale {
  transform: scale(0);
}
.scale-enter.scale-enter-active {
  transform: scale(1);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}
.scale-leave {
  transform: scale(1);
}
.scale-leave.scale-leave-active {
  transform: scale(0);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}


.pop {
  transform: scale(.1);
}
.pop-enter.pop-enter-active {
  transform: scale(1);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 500ms;
}
.pop-leave {
  transform: scale(1);
}
.pop-leave.pop-leave-active {
  transform: scale(0);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 500ms;
}

.fade-in {
  animation:fadeIn .5s ease;
}

.slide-in-out {
  width: 0;
  transition: transform 200ms ease-in;
}
.slide-in-out.slide-in {
  width: 256px;
}
.slide-in-out.slide-out {
  width:0
}

.slide-left-enter {
  transform: translate(100%);
}
.slide-left-enter.slide-left-enter-active {
  transform: translate(0%);
  transition: transform 300ms ease-in-out;
}
.slide-left-leave {
  transform: translate(0%);
}
.slide-left-leave.slide-left-leave-active {
  transform: translate(-100%);
  transition: transform 300ms ease-in-out;
}

.slide-right-enter {
  transform: translate(-100%);
}
.slide-right-enter.slide-right-enter-active {
  transform: translate(0%);
  transition: transform 300ms ease-in-out;
}
.slide-right-leave {
  transform: translate(0%);
}
.slide-right-leave.slide-right-leave-active {
  transform: translate(100%);
  transition: transform 300ms ease-in-out;
}

.transition-all{
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.pulse {
  position: relative;
  animation: pulse 4s infinite;
}

@keyframes pulse {
  0% {
    transform: scale( 1);
  }
  25% {
    transform: scale( .9);
  }
  50% {
    transform: scale( 1);
  }
  75% {
    transform: scale( .9);
  }
  100% {
    transform: scale( 1);
  }
}

.spin{
  transform:rotateY(720deg);
}

.pop{
  position: relative;
  animation: pop 1s ease;
}

@keyframes pop {
  0%{
    transform: scale(0.9);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

@keyframes ripple {
  5%, 100% { opacity: 0; }
  5% { opacity: 1; }
}

.blink-scale{
  display: flex;
  transition: all 1s ease-in-out;
  animation: blinkScale 1s linear infinite;
}

@keyframes blinkScale {
  0%{
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform:scale(1.5);
  }
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

.progress-load{
  animation: horizontalProgressLoader 5s ease;
  animation-fill-mode: both;
}

@keyframes horizontalProgressLoader {
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}

.pop-in{
  animation: popIn 100ms linear both;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

.placeholder-shimmer {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, white 8%, $lighter-gray 18%, white 33%);
  background-size: 800px 104px;
  position: relative;
}
.sonar{
  animation: sonarWave 1.5s linear infinite;
}
.focus-wave{
    animation: focusWave 1.8s cubic-bezier(0.56,0,0.54,1) infinite;
}
.ring{
  .notification-bell{
    animation-name: bellRing;
    animation-duration: 1s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    transform-origin: 50%;

    .ball {
      animation-name: ballShake;
      animation-duration: .25s;
      animation-iteration-count: 8;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
    }
  }
}

@keyframes bellRing {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(40deg); }
  40%, 80% { transform: rotate(-40deg); }
}

@keyframes ballShake {
  0% { transform: translateX(0px); }
  100% { transform: translateX(107.5px); }
}

@keyframes sonarWave {
  from {
    transform: scale(.7);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes focusWave {
  0% {
    transform: scale(.75);
    opacity: .6;
  }
  50% {
    transform: scale(.90);
    opacity: .3;
  }
  100% {
    transform: scale(.75);
    opacity: .6;
  }
}

@keyframes shimmer{
  0%{
    background-position: -468px 0
  }
  100%{
    background-position: 468px 0
  }
}