@mixin animations {

  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;

  .wcAnimation {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  @-webkit-keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
    }

    25%,
    75% {
      opacity: 0.25;
    }
  }
  @keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
    }

    25%,
    75% {
      opacity: 0.25;
    }
  }

  @keyframes flash60 {
    from,
    50%,
    to {
      opacity: 1;
    }

    25%,
    75% {
      opacity: 0.60;
    }
  }

  .wcAnimationFlash {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-name: flash;
  }

  .wcAnimationFlashSlow {
    animation-name: flash60;
    animation-iteration-count: infinite;
    animation-duration: 16s;
  }

  @-webkit-keyframes shakeY {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
  }
  @keyframes shakeY {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
  }
  .animate__shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY;
  }

  .wcAnimationFade {
    animation-duration: 0.5s;
    animation-name: animate-fade;
    animation-delay: 0s;
    animation-fill-mode: backwards;
  }

  @keyframes animate-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

}