bootstrap-sweetalert/lib/sweet-alert-animations.less

A beautiful 'replacement' for JavaScript's alert

@keyframes showSweetAlert {
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
};

@keyframes hideSweetAlert {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
};

@keyframes slideFromTop {
  0%    { top: 0%;  }
  100%  { top: 50%; }
};

@keyframes slideToTop {
  0%    { top: 50%; }
  100%  { top: 0%;  }
};

@keyframes slideFromBottom {
  0%    { top: 70%; }
  100%  { top: 50%;  }
}

@keyframes slideToBottom {
  0%    { top: 50%;  }
  100%  { top: 70%; }
}

.showSweetAlert {
  animation: showSweetAlert 0.3s;
  &[data-animation=none] {
    animation: none;
  }
  &[data-animation=slide-from-top] {
    animation: slideFromTop 0.3s;
  }
  &[data-animation=slide-from-bottom] {
    animation: slideFromBottom 0.3s;
  }
}

.hideSweetAlert {
  animation: hideSweetAlert 0.3s;
  &[data-animation=none] {
    animation: none;
  }
  &[data-animation=slide-from-top] {
    animation: slideToTop 0.3s;
  }
  &[data-animation=slide-from-bottom] {
    animation: slideToBottom 0.3s;
  }
}

@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}

.animateSuccessTip {
  animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
  animation: animateSuccessLong 0.75s;
}

.sa-icon.sa-success.animate::after {
  animation: rotatePlaceholder 4.25s ease-in;
}

@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.animateErrorIcon {
  animation: animateErrorIcon 0.5s;
}

@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    margin-top: -6px;
  }
  100% {
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}

.animateXMark {
  animation: animateXMark 0.5s;
}

@keyframes pulseWarning {
  0% { border-color: #F8D486; }
  100% { border-color: #F8BB86; }
}

.pulseWarning {
  animation: pulseWarning 0.75s infinite alternate;
}

@keyframes pulseWarningIns {
  0% { background-color: #F8D486; }
  100% { background-color: #F8BB86; }
}

.pulseWarningIns {
  animation: pulseWarningIns 0.75s infinite alternate;
}

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