:root {
    --bounce-down-step1: 10px;
    --bounce-down-step2: -6px;
    --bounce-down-duration: 0.2s;

    --side-bounce: 7px;
    --side-bounce-duration: 0.2s;
}


@-webkit-keyframes bounce-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    20% {
      -webkit-transform: translateY(var(--bounce-down-step1));
              transform: translateY(var(--bounce-down-step1));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    70% {
      -webkit-transform: translateY(var(--bounce-down-step2));
              transform: translateY(var(--bounce-down-step2));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }
  @keyframes bounce-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    20% {
      -webkit-transform: translateY(var(--bounce-down-step1));
              transform: translateY(var(--bounce-down-step1));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    70% {
      -webkit-transform: translateY(var(--bounce-down-step2));
              transform: translateY(var(--bounce-down-step2));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }
  
.bounce-out-bottom {
	-webkit-animation: bounce-out-bottom var(--bounce-down-duration) both;
	        animation: bounce-out-bottom var(--bounce-down-duration) both;
}



@-webkit-keyframes shake-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    30% {
      -webkit-transform: translateX(calc(-1 * var(--side-bounce)));
              transform: translateX(calc(-1 * var(--side-bounce)));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }
  @keyframes shake-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    30% {
      -webkit-transform: translateX(calc(-1 * var(--side-bounce)));
              transform: translateX(calc(-1 * var(--side-bounce)));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }

.shake-left {
	-webkit-animation: shake-left 0.2s both;
	        animation: shake-left 0.2s both;
}

@-webkit-keyframes shake-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    30% {
      -webkit-transform: translateX(var(--side-bounce));
              transform: translateX(var(--side-bounce));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }
  @keyframes shake-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    30% {
      -webkit-transform: translateX(var(--side-bounce));
              transform: translateX(var(--side-bounce));
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
  }

.shake-right {
	-webkit-animation: shake-right 0.2s both;
	        animation: shake-right 0.2s both;
}