Spaces:

sandy-try
/

blog

Runtime error

blog / styles /animate.css

Upload 699 files

1b72d7e verified over 2 years ago

10.4 kB

@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 * https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
 * 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}


@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}


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

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

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

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-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;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}


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

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}



@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}


/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

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

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


/* Fading exits */
/* 删除 */

/* Flippers */
/* 删除 */

/* Lightspeed */
/* 删除 */

/* Rotating exits */
/* 删除 */

/* Zooming entrances */
/* 删除 */

/* Sliding entrances */

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}


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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

	@charset "UTF-8";/*!
	* animate.css - https://animate.style/
	* Version - 4.1.1
	* Licensed under the MIT license - http://opensource.org/licenses/MIT
	* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
	* 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
	* Copyright (c) 2020 Animate.css
	*/
	:root {
	--animate-duration: 1s;
	--animate-delay: 1s;
	--animate-repeat: 1;
	}
	.animate__animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: var(--animate-duration);
	animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}


	.animate__animated.animate__faster {
	-webkit-animation-duration: calc(1s / 2);
	animation-duration: calc(1s / 2);
	-webkit-animation-duration: calc(var(--animate-duration) / 2);
	animation-duration: calc(var(--animate-duration) / 2);
	}
	.animate__animated.animate__fast {
	-webkit-animation-duration: calc(1s * 0.8);
	animation-duration: calc(1s * 0.8);
	-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
	animation-duration: calc(var(--animate-duration) * 0.8);
	}


	@media print, (prefers-reduced-motion: reduce) {
	.animate__animated {
	-webkit-animation-duration: 1ms !important;
	animation-duration: 1ms !important;
	-webkit-transition-duration: 1ms !important;
	transition-duration: 1ms !important;
	-webkit-animation-iteration-count: 1 !important;
	animation-iteration-count: 1 !important;
	}

	.animate__animated[class*='Out'] {
	opacity: 0;
	}
	}


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

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

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

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

	20%,
	40%,
	60%,
	80% {
	-webkit-transform: translate3d(10px, 0, 0);
	transform: translate3d(10px, 0, 0);
	}
	}
	.animate__shakeX {
	-webkit-animation-name: shakeX;
	animation-name: shakeX;
	}
	@-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;
	}
	@-webkit-keyframes headShake {
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}

	6.5% {
	-webkit-transform: translateX(-6px) rotateY(-9deg);
	transform: translateX(-6px) rotateY(-9deg);
	}

	18.5% {
	-webkit-transform: translateX(5px) rotateY(7deg);
	transform: translateX(5px) rotateY(7deg);
	}

	31.5% {
	-webkit-transform: translateX(-3px) rotateY(-5deg);
	transform: translateX(-3px) rotateY(-5deg);
	}

	43.5% {
	-webkit-transform: translateX(2px) rotateY(3deg);
	transform: translateX(2px) rotateY(3deg);
	}

	50% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	}
	@keyframes headShake {
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}

	6.5% {
	-webkit-transform: translateX(-6px) rotateY(-9deg);
	transform: translateX(-6px) rotateY(-9deg);
	}

	18.5% {
	-webkit-transform: translateX(5px) rotateY(7deg);
	transform: translateX(5px) rotateY(7deg);
	}

	31.5% {
	-webkit-transform: translateX(-3px) rotateY(-5deg);
	transform: translateX(-3px) rotateY(-5deg);
	}

	43.5% {
	-webkit-transform: translateX(2px) rotateY(3deg);
	transform: translateX(2px) rotateY(3deg);
	}

	50% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	}
	.animate__headShake {
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: headShake;
	animation-name: headShake;
	}


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

	22.2% {
	-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
	transform: skewX(-12.5deg) skewY(-12.5deg);
	}

	33.3% {
	-webkit-transform: skewX(6.25deg) skewY(6.25deg);
	transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
	-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
	transform: skewX(-3.125deg) skewY(-3.125deg);
	}

	55.5% {
	-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
	transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
	-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
	transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}

	77.7% {
	-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
	transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
	-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
	}
	.animate__jello {
	-webkit-animation-name: jello;
	animation-name: jello;
	-webkit-transform-origin: center;
	transform-origin: center;
	}



	@-webkit-keyframes bounceInRight {
	from,
	60%,
	75%,
	90%,
	to {
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
	opacity: 0;
	-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
	transform: translate3d(3000px, 0, 0) scaleX(3);
	}

	60% {
	opacity: 1;
	-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
	transform: translate3d(-25px, 0, 0) scaleX(1);
	}

	75% {
	-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
	transform: translate3d(10px, 0, 0) scaleX(0.98);
	}

	90% {
	-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
	transform: translate3d(-5px, 0, 0) scaleX(0.995);
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	@keyframes bounceInRight {
	from,
	60%,
	75%,
	90%,
	to {
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
	opacity: 0;
	-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
	transform: translate3d(3000px, 0, 0) scaleX(3);
	}

	60% {
	opacity: 1;
	-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
	transform: translate3d(-25px, 0, 0) scaleX(1);
	}

	75% {
	-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
	transform: translate3d(10px, 0, 0) scaleX(0.98);
	}

	90% {
	-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
	transform: translate3d(-5px, 0, 0) scaleX(0.995);
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	.animate__bounceInRight {
	-webkit-animation-name: bounceInRight;
	animation-name: bounceInRight;
	}


	/* Fading entrances */
	@-webkit-keyframes fadeIn {
	from {
	opacity: 0;
	}

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

	to {
	opacity: 1;
	}
	}
	.animate__fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	}


	/* Fading exits */
	/* 删除 */

	/* Flippers */
	/* 删除 */

	/* Lightspeed */
	/* 删除 */

	/* Rotating exits */
	/* 删除 */

	/* Zooming entrances */
	/* 删除 */

	/* Sliding entrances */

	@-webkit-keyframes slideInLeft {
	from {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	visibility: visible;
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	@keyframes slideInLeft {
	from {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	visibility: visible;
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	.animate__slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
	}
	@-webkit-keyframes slideInRight {
	from {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	visibility: visible;
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	@keyframes slideInRight {
	from {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	visibility: visible;
	}

	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	}
	.animate__slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
	}


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

	to {
	visibility: hidden;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	}
	}
	.animate__slideOutLeft {
	-webkit-animation-name: slideOutLeft;
	animation-name: slideOutLeft;
	}
	@-webkit-keyframes slideOutRight {
	from {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}

	to {
	visibility: hidden;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	}
	}
	@keyframes slideOutRight {
	from {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}

	to {
	visibility: hidden;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	}
	}
	.animate__slideOutRight {
	-webkit-animation-name: slideOutRight;
	animation-name: slideOutRight;
	}