Bootstrap v3 carousel animations

bootstrap-carousel-animations.less

.custom-animate-base {
	.carousel-inner {
		overflow: visible;
		> .item {
			left: auto;
			&.next.left,
			&.prev.right,
			&.active {
				transform: none;
				left: auto;
			}
		}
	}
}

/*****************************************/
/* coverflow */
/*****************************************/

@keyframes rotate3DSlideOutLeft {
	from {}
	to {
		transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
		opacity: 0;
	}
}

@keyframes rotate3DSlideInRight {
	from {
		transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
	}
	to {
		transform: translateX(0) rotateY(0deg) translateZ(0);
		opacity: 1;
	}
}

@keyframes rotate3DSlideOutRight {
	from {}
	to {
		transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
		opacity: 0;
	}
}

@keyframes rotate3DSlideInLeft {
	from {
		transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
	}
	to {
		transform: translateX(0) rotateY(0deg) translateZ(0);
		opacity: 1;
	}
}

.animate-coverflow {
  .custom-animate-base();
	.carousel-inner {
    perspective: 1400px;
    > .item {
      &.active.left {
        animation: rotate3DSlideOutLeft 0.6s forwards;
      }
      &.next.left {
        opacity: 0;
        animation: rotate3DSlideInRight 0.3s 0.1s forwards;
      }
      &.active.right {
        animation: rotate3DSlideOutRight 0.3s forwards;
      }	
      &.prev.right {
        opacity: 0;
        animation: rotate3DSlideInLeft 0.3s 0.1s forwards;
      }
    }
	}
}

/*****************************************/
/* Fall */
/*****************************************/

@keyframes slideDown {
	from {
    opacity: 1;
  }
	to {
		transform: translateY(50%);
		opacity: 0;
	}
}

@keyframes showUp {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes hideDown {
	from {
    opacity: 1;
  }
	to {
		transform: scale(0.5);
		opacity: 0;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(50%);
    opacity: 0;
	}
	to {
		transform: translateY(0%);
		opacity: 1;
	}
}

.animate-fall {
  .custom-animate-base();
	.carousel-inner > .item {
    &.active.left {
      animation: slideDown 0.6s forwards;
    }
    &.next.left {
      animation: showUp 0.6s forwards;
    }
    &.active.right {
      animation: hideDown 0.6s forwards;
    }
    &.prev.right {
      animation: slideUp 0.6s forwards;
    }
	}
}

/*****************************************/
/* Rotate pulse */
/*****************************************/

@keyframes elastScaleRotateUp {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	30% {
		transform: rotate(5deg) scale(0.7);
		opacity: 1;
	}
	100% {
		transform: rotate(25deg) scale(1.3);
		opacity: 0;
	}
}

@keyframes growRotateUp {
	0% {
		transform: rotate(-25deg) scale(0);
	}
	100% {
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
}

@keyframes elastScaleRotateDown {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	30% {
		transform: rotate(-5deg) scale(1.3);
		opacity: .5;
	}
	100% {
		transform: rotate(-25deg) scale(0);
		opacity: 0;
	}
}

@keyframes growRotateDown {
	0% {
		transform: rotate(10deg) scale(1.3);
	}
	100% {
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
}

.animate-rotate-pulse {
  .custom-animate-base();
	.carousel-inner > .item {
    &.active.left {
      animation: elastScaleRotateUp 0.3s forwards;
    }
    &.next.left {
      opacity: 0;
      animation: growRotateUp 0.3s 0.3s forwards;
    }
    &.active.right {
      animation: elastScaleRotateDown 0.3s forwards;
    }
    &.prev.right {
      opacity: 0;
      animation: growRotateDown 0.3s 0.3s forwards;
    }
	}
}

/*****************************************/
/* Rotate me softly */
/*****************************************/

@keyframes rotate3DOutRight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		transform: translate(50%) rotateY(-70deg) rotateX(20deg) translateZ(-300px);
		opacity: 0;
	}
}

@keyframes slideInFromLeft {
	from {
		transform: translateX(-200%);
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes rotate3DOutLeft {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		transform: translate(-50%) rotateY(70deg) rotateX(20deg) translateZ(-300px);
		opacity: 0;
	}
}

@keyframes slideInFromRight {
	from {
		transform: translateX(200%);
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.animate-rotate-softly {
  .custom-animate-base();
	.carousel-inner > .item {
    perspective: 1600px;
    &.active.left {
      animation: rotate3DOutLeft 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
    }
    &.next.left {
      animation: slideInFromRight 0.2s 0.4s forwards cubic-bezier(0, 0, 0, 1);
    }
    &.active.right {
      animation: rotate3DOutRight 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
    }
    &.prev.right {
      animation: slideInFromLeft 0.2s 0.4s forwards cubic-bezier(0, 0, 0, 1);
    }
	}
}

/*****************************************/
/* Soft Scale */
/*****************************************/

@keyframes scaleUp {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		transform: scale(1.2);
		opacity: 0;
	}
}

@keyframes scaleDownUp {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes scaleDown {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		opacity: 0;
		transform: scale(0.9);
	}
}

@keyframes scaleUpDown {
	from {
		transform: scale(1.2);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.animate-soft-scale {
  .custom-animate-base();
	.carousel-inner > .item {
		&.active.left {
			animation: scaleUp 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
		}
		&.next.left {
			opacity: 0;
			animation: scaleDownUp 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
		}
		&.active.right {
			animation: scaleDown 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
		}
		&.prev.right {
			opacity: 0;
			animation: scaleUpDown 0.6s forwards cubic-bezier(0.7, 0, 0.3, 1);
		}
	}
}