📁 Captain File Manager

✏️ Editing: text-animations.css

/*--------------------------------------------------------------
== General
--------------------------------------------------------------*/

.wpr-anim-text-inner {
	display: inline-block;
	position: relative;
	text-align: left;
}

.wpr-anim-text-inner b {
	display: inline-block;
	position: absolute;
	white-space: nowrap;
	left: 0;
	top: 0;
}

.wpr-anim-text-inner b.wpr-anim-text-visible {
	position: relative;
}

/*--------------------------------------------------------------
== Rotate 1
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-rotate-1 .wpr-anim-text-inner {
	-webkit-perspective: 300px;
	perspective: 300px;
}

.wpr-anim-text.wpr-anim-text-type-rotate-1 b {
	opacity: 0;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.wpr-anim-text.wpr-anim-text-type-rotate-1 b.wpr-anim-text-visible {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-animation: wpr-anim-text-rotate-1-in 1.2s;
	animation: wpr-anim-text-rotate-1-in 1.2s;
}

.wpr-anim-text.wpr-anim-text-type-rotate-1 b.wpr-anim-text-hidden {
	-webkit-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-animation: wpr-anim-text-rotate-1-out 1.2s;
	animation: wpr-anim-text-rotate-1-out 1.2s;
}

@-webkit-keyframes wpr-anim-text-rotate-1-in {
	0% {
		-webkit-transform: rotateX(180deg);
		opacity: 0;
	}
	35% {
		-webkit-transform: rotateX(120deg);
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(360deg);
		opacity: 1;
	}
}

@keyframes wpr-anim-text-rotate-1-in {
	0% {
		-webkit-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		transform: rotateX(180deg);
		opacity: 0;
	}
	35% {
		-webkit-transform: rotateX(120deg);
		-ms-transform: rotateX(120deg);
		transform: rotateX(120deg);
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(360deg);
		-ms-transform: rotateX(360deg);
		transform: rotateX(360deg);
		opacity: 1;
	}
}

@-webkit-keyframes wpr-anim-text-rotate-1-out {
	0% {
		-webkit-transform: rotateX(0deg);
		opacity: 1;
	}
	35% {
		-webkit-transform: rotateX(-40deg);
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(180deg);
		opacity: 0;
	}
}

@keyframes wpr-anim-text-rotate-1-out {
	0% {
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
		opacity: 1;
	}
	35% {
		-webkit-transform: rotateX(-40deg);
		-ms-transform: rotateX(-40deg);
		transform: rotateX(-40deg);
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		transform: rotateX(180deg);
		opacity: 0;
	}
}

/*--------------------------------------------------------------
== Typing
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-typing .wpr-anim-text-inner {
	vertical-align: top;
	overflow: hidden;
}

.wpr-anim-text.wpr-anim-text-type-typing b {
	visibility: hidden;
}

.wpr-anim-text.wpr-anim-text-type-typing b.wpr-anim-text-visible {
	visibility: visible;
}

.wpr-anim-text.wpr-anim-text-type-typing i {
	position: absolute;
	visibility: hidden;
}

.wpr-anim-text.wpr-anim-text-type-typing i.wpr-anim-text-in {
	position: relative;
	visibility: visible;
}

@-webkit-keyframes wpr-anim-text-pulse {
	0% {
		-webkit-transform: translateY(-50%) scale(1);
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-50%) scale(0.9);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(-50%) scale(0);
		opacity: 0;
	}
}

@keyframes wpr-anim-text-pulse {
	0% {
		-webkit-transform: translateY(-50%) scale(1);
		-ms-transform: translateY(-50%) scale(1);
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-50%) scale(0.9);
		-ms-transform: translateY(-50%) scale(0.9);
		transform: translateY(-50%) scale(0.9);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(-50%) scale(0);
		-ms-transform: translateY(-50%) scale(0);
		transform: translateY(-50%) scale(0);
		opacity: 0;
	}
}

/*--------------------------------------------------------------
== Rotate 2
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-rotate-2 .wpr-anim-text-inner {
	-webkit-perspective: 300px;
	perspective: 300px;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 i,
.wpr-anim-text.wpr-anim-text-type-rotate-2 em {
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 i {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-20px) rotateX(90deg);
	-ms-transform: translateZ(-20px) rotateX(90deg);
	transform: translateZ(-20px) rotateX(90deg);
	opacity: 0;
}

.wpr-anim-text-visible .wpr-anim-text.wpr-anim-text-type-rotate-2 i {
	opacity: 1;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 i.wpr-anim-text-in {
	-webkit-animation: wpr-anim-text-rotate-2-in 0.4s forwards;
	animation: wpr-anim-text-rotate-2-in 0.4s forwards;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 i.wpr-anim-text-out {
	-webkit-animation: wpr-anim-text-rotate-2-out 0.4s forwards;
	animation: wpr-anim-text-rotate-2-out 0.4s forwards;
}

.wpr-anim-text.wpr-anim-text-type-rotate-2 em {
	-webkit-transform: translateZ(20px);
	-ms-transform: translateZ(20px);
	transform: translateZ(20px);
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-rotate-2 i {
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 0;
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-rotate-2 i em {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-rotate-2 .wpr-anim-text-visible i {
	opacity: 1;
}

@-webkit-keyframes wpr-anim-text-rotate-2-in {
	0% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(90deg);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(-10deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(0deg);
	}
}

@keyframes wpr-anim-text-rotate-2-in {
	0% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(90deg);
		-ms-transform: translateZ(-20px) rotateX(90deg);
		transform: translateZ(-20px) rotateX(90deg);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(-10deg);
		-ms-transform: translateZ(-20px) rotateX(-10deg);
		transform: translateZ(-20px) rotateX(-10deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(0deg);
		-ms-transform: translateZ(-20px) rotateX(0deg);
		transform: translateZ(-20px) rotateX(0deg);
	}
}

@-webkit-keyframes wpr-anim-text-rotate-2-out {
	0% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(-100deg);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(-90deg);
	}
}

@keyframes wpr-anim-text-rotate-2-out {
	0% {
		opacity: 1;
		-webkit-transform: translateZ(-20px) rotateX(0);
		-ms-transform: translateZ(-20px) rotateX(0);
		transform: translateZ(-20px) rotateX(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(-100deg);
		-ms-transform: translateZ(-20px) rotateX(-100deg);
		transform: translateZ(-20px) rotateX(-100deg);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateZ(-20px) rotateX(-90deg);
		-ms-transform: translateZ(-20px) rotateX(-90deg);
		transform: translateZ(-20px) rotateX(-90deg);
	}
}

/*--------------------------------------------------------------
== Slide
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-slide span {
	display: inline-block;
	padding: .2em 0;
}

.wpr-anim-text.wpr-anim-text-type-slide .wpr-anim-text-inner {
	overflow: hidden;
	vertical-align: top;
}

.wpr-anim-text.wpr-anim-text-type-slide b {
	opacity: 0;
	top: .2em;
}

.wpr-anim-text.wpr-anim-text-type-slide b.wpr-anim-text-visible {
	top: 0;
	opacity: 1;
	-webkit-animation: wpr-anim-text-slide-in 0.6s;
	animation: wpr-anim-text-slide-in 0.6s;
}

.wpr-anim-text.wpr-anim-text-type-slide b.wpr-anim-text-hidden {
	-webkit-animation: wpr-anim-text-slide-out 0.6s;
	animation: wpr-anim-text-slide-out 0.6s;
}

@-webkit-keyframes wpr-anim-text-slide-in {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateY(20%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes wpr-anim-text-slide-in {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateY(20%);
		-ms-transform: translateY(20%);
		transform: translateY(20%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes wpr-anim-text-slide-out {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateY(120%);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
}

@keyframes wpr-anim-text-slide-out {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateY(120%);
		-ms-transform: translateY(120%);
		transform: translateY(120%);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
	}
}

/*--------------------------------------------------------------
== Clip
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-clip span {
	display: inline-block;
	padding: .2em 0;
}

.wpr-anim-text.wpr-anim-text-type-clip .wpr-anim-text-inner {
	overflow: hidden;
	vertical-align: top;
}

.wpr-anim-text.wpr-anim-text-type-clip b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-clip b.wpr-anim-text-visible {
	opacity: 1;
}

/*--------------------------------------------------------------
== Zoom
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-zoom .wpr-anim-text-inner {
	-webkit-perspective: 300px;
	perspective: 300px;
}

.wpr-anim-text.wpr-anim-text-type-zoom b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-zoom b.wpr-anim-text-visible {
	opacity: 1;
	-webkit-animation: wpr-anim-text-zoom-in 0.8s;
	animation: wpr-anim-text-zoom-in 0.8s;
}

.wpr-anim-text.wpr-anim-text-type-zoom b.wpr-anim-text-hidden {
	-webkit-animation: wpr-anim-text-zoom-out 0.8s;
	animation: wpr-anim-text-zoom-out 0.8s;
}

@-webkit-keyframes wpr-anim-text-zoom-in {
	0% {
		opacity: 0;
		-webkit-transform: translateZ(100px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
	}
}

@keyframes wpr-anim-text-zoom-in {
	0% {
		opacity: 0;
		-webkit-transform: translateZ(100px);
		-ms-transform: translateZ(100px);
		transform: translateZ(100px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@-webkit-keyframes wpr-anim-text-zoom-out {
	0% {
		opacity: 1;
		-webkit-transform: translateZ(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateZ(-100px);
	}
}

@keyframes wpr-anim-text-zoom-out {
	0% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateZ(-100px);
		-ms-transform: translateZ(-100px);
		transform: translateZ(-100px);
	}
}

/*--------------------------------------------------------------
== Rotate-3
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-rotate-3 .wpr-anim-text-inner {
	-webkit-perspective: 300px;
	perspective: 300px;
}

.wpr-anim-text.wpr-anim-text-type-rotate-3 b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-rotate-3 i {
	display: inline-block;
	-webkit-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wpr-anim-text-visible .wpr-anim-text.wpr-anim-text-type-rotate-3 i {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.wpr-anim-text.wpr-anim-text-type-rotate-3 i.wpr-anim-text-in {
	-webkit-animation: wpr-anim-text-rotate-3-in 0.6s forwards;
	animation: wpr-anim-text-rotate-3-in 0.6s forwards;
}

.wpr-anim-text.wpr-anim-text-type-rotate-3 i.wpr-anim-text-out {
	-webkit-animation: wpr-anim-text-rotate-3-out 0.6s forwards;
	animation: wpr-anim-text-rotate-3-out 0.6s forwards;
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-rotate-3 i {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 0;
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-rotate-3 .wpr-anim-text-visible i {
	opacity: 1;
}

@-webkit-keyframes wpr-anim-text-rotate-3-in {
	0% {
		-webkit-transform: rotateY(180deg);
	}
	100% {
		-webkit-transform: rotateY(0deg);
	}
}

@keyframes wpr-anim-text-rotate-3-in {
	0% {
		-webkit-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
	100% {
		-webkit-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}

@-webkit-keyframes wpr-anim-text-rotate-3-out {
	0% {
		-webkit-transform: rotateY(0);
	}
	100% {
		-webkit-transform: rotateY(-180deg);
	}
}

@keyframes wpr-anim-text-rotate-3-out {
	0% {
		-webkit-transform: rotateY(0);
		-ms-transform: rotateY(0);
		transform: rotateY(0);
	}
	100% {
		-webkit-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
}

/*--------------------------------------------------------------
== Scale
--------------------------------------------------------------*/

.wpr-anim-text.wpr-anim-text-type-scale b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-scale i {
	display: inline-block;
	opacity: 0;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.wpr-anim-text-visible .wpr-anim-text.wpr-anim-text-type-scale i {
	opacity: 1;
}

.wpr-anim-text.wpr-anim-text-type-scale i.wpr-anim-text-in {
	-webkit-animation: wpr-anim-text-scale-up 0.6s forwards;
	animation: wpr-anim-text-scale-up 0.6s forwards;
}

.wpr-anim-text.wpr-anim-text-type-scale i.wpr-anim-text-out {
	-webkit-animation: wpr-anim-text-scale-down 0.6s forwards;
	animation: wpr-anim-text-scale-down 0.6s forwards;
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-scale i {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 0;
}

.no-csstransitions .wpr-anim-text.wpr-anim-text-type-scale .wpr-anim-text-visible i {
	opacity: 1;
}

@-webkit-keyframes wpr-anim-text-scale-up {
	0% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

@keyframes wpr-anim-text-scale-up {
	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes wpr-anim-text-scale-down {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
}

@keyframes wpr-anim-text-scale-down {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}
}

/*--------------------------------------------------------------
== Push
--------------------------------------------------------------*/
.wpr-anim-text-type-push {
	overflow: hidden;
}

.wpr-anim-text.wpr-anim-text-type-push b {
	opacity: 0;
}

.wpr-anim-text.wpr-anim-text-type-push b.wpr-anim-text-visible {
	opacity: 1;
	-webkit-animation: wpr-anim-text-push-in 0.6s;
	animation: wpr-anim-text-push-in 0.6s;
}

.wpr-anim-text.wpr-anim-text-type-push b.wpr-anim-text-hidden {
	-webkit-animation: wpr-anim-text-push-out 0.6s;
	animation: wpr-anim-text-push-out 0.6s;
}

@-webkit-keyframes wpr-anim-text-push-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(10%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@keyframes wpr-anim-text-push-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(10%);
		-ms-transform: translateX(10%);
		transform: translateX(10%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes wpr-anim-text-push-out {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateX(110%);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
}

@keyframes wpr-anim-text-push-out {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateX(110%);
		-ms-transform: translateX(110%);
		transform: translateX(110%);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}