
@keyframes long {
  0% {
      width: 0
  }

  25% {
      width: 25%
  }

  50% {
      width: 100%
  }

  75% {
      width: 25%
  }

  to {
      width: 0
  }
}
 
@keyframes previewShapeY {
    0%, 100% {
      transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateY(-10px);
    }
    20%, 40%, 60%, 80% {
      transform: translateY(10px);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  @keyframes fadeIn2 {
    from {
      opacity: 0
    }
  
    to {
      opacity: .5
    }
  }
  

  @keyframes fadeOut {  
    from { transform: translateX(0) scale(1); -webkit-transform: translateX(0) scale(1); -moz-transform: translateX(0) scale(1); -ms-transform: translateX(0) scale(1); -o-transform: translateX(0) scale(1); }  
    to { transform: translateX(100%) scale(3); -webkit-transform: translateX(100%) scale(3); -moz-transform: translateX(100%) scale(3); -ms-transform: translateX(100%) scale(3); -o-transform: translateX(100%) scale(3); }  
  }

  
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform:  scale(1);
    -webkit-transform:  scale(1);
    -moz-transform:  scale(1);
    -ms-transform:  scale(1);
    -o-transform:  scale(1);
}

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0 )   scale(4);
    transform: translate3d(0, -100%, 0 )   scale(4);
    -moz-transform: translate3d(0, -100%, 0 )   scale(4);
    -ms-transform: translate3d(0, -100%, 0 )   scale(4);
    -o-transform: translate3d(0, -100%, 0 )   scale(4);
}
}

@keyframes warn {

  0% {
      transform:scale(3);
      -webkit-transform:scale(3);
      -moz-transform:scale(3);
      -ms-transform:scale(3);
      -o-transform:scale(3);
      opacity: .8;
}

 

  50% {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
      opacity: 1;
} 

  100% {
      transform:scale(3);
      -webkit-transform:scale(3);
      -moz-transform:scale(3);
      -ms-transform:scale(3);
      -o-transform:scale(3);
      opacity: .8;
}

}
