Skip to content

SLIDER – KEN BURNS Effect


/*SLIDER KEN BURNS*/
.sp-mask .wpex-slider-media img {
	animation: move 30s infinite;
}
.wpex-slider-media {
	overflow: hidden;
}
.wpex-slider__overlay {
	z-index: 1000;
}

@keyframes kenburns {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
		animation-timing-function: ease-in;
		opacity: 1;
	}
	100% {
		transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
		opacity: 0;
	}
}

.sp-mask {
	/*  width: 100%;
	height: 50vw;
	margin: 0 auto;*/
	/*  overflow: hidden;*/
	/*  position: relative;*/
}

.sp-mask .wpex-slider-media img {
	/*  width: 100%;
	animation: move 40s ease;  
	-ms-animation: move 40s ease;
	-webkit-animation: move 40s ease;
	-0-animation: move 40s ease;
	-moz-animation: move 40s ease;
	position: absolute;*/
}

@-webkit-keyframes move {
	0% {
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-ms-transform-origin: bottom left;
		-o-transform-origin: bottom left;
		transform-origin: bottom left;
		transform: scale3d(1.0);
		-ms-transform: scale(1.0);
		/* IE 9 */

		-webkit-transform: scale(1.0);
		/* Safari and Chrome */

		-o-transform: scale(1.0);
		/* Opera */

		-moz-transform: scale(1.0);
		/* Firefox */
	}
	70% {
		transform: scale3d(1.2);
		-ms-transform: scale(1.2);
		/* IE 9 */

		-webkit-transform: scale(1.2);
		/* Safari and Chrome */

		-o-transform: scale(1.2);
		/* Opera */

		-moz-transform: scale(1.2);
		/* Firefox */
	}
	100% {
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-ms-transform-origin: bottom left;
		-o-transform-origin: bottom left;
		transform-origin: bottom left;
		transform: scale3d(1.0);
		-ms-transform: scale(1.0);
		/* IE 9 */

		-webkit-transform: scale(1.0);
		/* Safari and Chrome */

		-o-transform: scale(1.0);
		/* Opera */

		-moz-transform: scale(1.0);
		/* Firefox */
	}
}
.wpex-slider-caption {
	z-index: 1001;
	font-family: "Univers Regular",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	white-space: unset !important;
	font-size: 50px;
	line-height: 1.2em;
	color: #f7f7f7;
}

An den Anfang scrollen