CSS3-Textanimationseffekte

<div Klasse="sp-container">
	<div Klasse="sp-Inhalt">
		<div Klasse="sp-globe"></div>
		<h2 class="frame-1">123WORDPRESS.COM</h2>
		<h2 Klasse="Frame-2">jb51</h2>
		<h2 class="frame-3">www.jb51.net</h2>
		<h2 class="frame-4">TESTEN SIE ES!</h2>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Barlow');

Körper {
	Hintergrund: #310404 URL (https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) Keine Wiederholung in der Mitte behoben; 
	-webkit-Hintergrundgröße: Abdeckung;
	-moz-Hintergrundgröße: Abdeckung;
	-o-Hintergrundgröße: Abdeckung;
	Hintergrundgröße: Abdeckung;
	Schriftfamilie: „Barlow“, serifenlos;
}
.container {
	Breite: 100 %;
	Position: relativ;
	Überlauf: versteckt;
}
A {
	Textdekoration: keine;
}
h1.main, p.demos {
	-Webkit-Animationsverzögerung: 18 s;
	-moz-Animationsverzögerung: 18 s;
	-ms-Animationsverzögerung: 18 s;
	Animationsverzögerung: 18 s;
}
.sp-container {
	Position: fest;
	oben: 0px;
	links: 0px;
	Breite: 100 %;
	Höhe: 100%;
	Z-Index: 0;
	Hintergrund: -webkit-radial-gradient(rgba(0, 0, 0, 0,1), rgba(0, 0, 0, 0,3) 35 %, rgba(0, 0, 0, 0,7));
	Hintergrund: -moz-radial-gradient(rgba(0, 0, 0, 0,1), rgba(0, 0, 0, 0,3) 35 %, rgba(0, 0, 0, 0,7));
	Hintergrund: -ms-radial-gradient(rgba(0, 0, 0, 0,1), rgba(0, 0, 0, 0,3) 35 %, rgba(0, 0, 0, 0,7));
	Hintergrund: radialer Farbverlauf (rgba (0, 0, 0, 0,1), rgba (0, 0, 0, 0,3) 35 %, rgba (0, 0, 0, 0,7));
}
.sp-Inhalt {
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	links: 0px;
	oben: 0px;
	Z-Index: 1000;
}
.sp-container h2 {
	Position: absolut;
	oben: 50 %;
	Zeilenhöhe: 100px;
	Höhe: 90px;
	Rand oben: -50px;
	Schriftgröße: 90px;
	Breite: 100 %;
	Textausrichtung: zentriert;
	Farbe: transparent;
	-webkit-animation: blurFadeInOut 3s langsam rückwärts einblenden;
	-moz-animation: blurFadeInOut 3s langsam rückwärts einblenden;
	-ms-animation: blurFadeInOut 3s langsam rückwärts;
	Animation: BlurFadeInOut 3 s, langsam rückwärts einblenden;
}
.sp-container h2.frame-1 {
	-Webkit-Animationsverzögerung: 0 s;
	-moz-Animationsverzögerung: 0 s;
	-ms-Animationsverzögerung: 0 s;
	Animationsverzögerung: 0 s;
}
.sp-container h2.frame-2 {
	-Webkit-Animationsverzögerung: 3 s;
	-moz-Animationsverzögerung: 3 s;
	-ms-Animationsverzögerung: 3 s;
	Animationsverzögerung: 3 s;
}
.sp-container h2.frame-3 {
	-Webkit-Animationsverzögerung: 6 s;
	-moz-Animationsverzögerung: 6 s;
	-ms-Animationsverzögerung: 6 s;
	Animationsverzögerung: 6 s;
}
.sp-container h2.frame-4 {
	Schriftgröße: 200px;
	-Webkit-Animationsverzögerung: 9 s;
	-moz-Animationsverzögerung: 9 s;
	-ms-Animationsverzögerung: 9 s;
	Animationsverzögerung: 9 s;
}
.sp-container h2.frame-5 {
	-Webkit-Animation: keine;
	-moz-Animation: keine;
	-ms-Animation: keine;
	Animation: keine;
	Farbe: transparent;
	Textschatten: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
	-webkit-animation: blurFadeIn 3s ease-in 12s rückwärts;
	-moz-animation: blurFadeIn 1s ease-in 12s rückwärts;
	-ms-animation: blurFadeIn 3s, 12s rückwärts einblenden;
	Animation: Unschärfe, Einblenden, 3 s, 12 s rückwärts;
	Farbe: transparent;
	Textschatten: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
	-Webkit-Animationsverzögerung: 13 s;
	-moz-Animationsverzögerung: 13 s;
	-ms-Animationsverzögerung: 13 s;
	Animationsverzögerung: 13 s;
}
.sp-container h2.frame-5 span:nth-child(3) {
	-Webkit-Animationsverzögerung: 14 s;
	-moz-Animationsverzögerung: 14 s;
	-ms-Animationsverzögerung: 14 s;
	Animationsverzögerung: 14 s;
}
.sp-globe {
	Position: absolut;
	Breite: 282px;
	Höhe: 273px;
	links: 50%;
	oben: 50 %;
	Rand: -137px 0 0 -141px;
	Hintergrund: transparente URL (http://web-sonick.zz.mu/images/sl/globe.png) keine Wiederholung oben links;
	-webkit-animation: fadeInBack 3,6 s linear 14 s rückwärts;
	-moz-animation: fadeInBack 3,6 s linear 14 s rückwärts;
	-ms-animation: fadeInBack 3,6 s linear 14 s rückwärts;
	Animation: FadeInBack 3,6 s linear 14 s rückwärts;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	Filter: Alpha (Deckkraft = 30);
	Deckkraft: 0,3;
	-webkit-transform: Skalierung(5);
	-moz-transform: Skalierung(5);
	-o-transform: Skalierung(5);
	-ms-transform:Skala(5);
	transformieren: Skalierung(5);
}
.sp-Kreis-Link {
	Position: absolut;
	links: 50%;
	unten: 100px;
	Rand links: -50px;
	Textausrichtung: zentriert;
	Zeilenhöhe: 100px;
	Breite: 100px;
	Höhe: 100px;
	Hintergrund: #fff;
	Farbe: #3f1616;
	Schriftgröße: 25px;
	-Webkit-Randradius: 50 %;
	-moz-Randradius: 50 %;
	Randradius: 50 %;
	-webkit-animation: fadeInRotate 1s linear 16s rückwärts;
	-moz-animation: fadeInRotate 1s linear 16s rückwärts;
	-ms-animation: fadeInRotate 1s linear 16s rückwärts;
	Animation: Einblenden/Drehen 1s linear 16s rückwärts;
	-webkit-transform: Skalierung(1) Drehen(0 Grad);
	-moz-transform: Skalierung (1) Drehung (0 Grad);
	-o-transform: Skalierung(1) Drehung(0 Grad);
	-ms-transform: Skalierung(1) Drehung(0 Grad);
	transformieren: skalieren (1) drehen (0 Grad);
}
.sp-circle-link:hover {
	Hintergrund: #85373b;
	Farbe: #fff;
}
/**/

@-webkit-keyframes blurFadeInOut {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		-webkit-transform: Skalierung(1.3);
	}
	20 %, 75 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		-webkit-transform: Skalierung(1);
	}
	100 % {
		Deckkraft: 0;
		Textschatten: 0px 0px 50px #fff;
		-webkit-transform: Skalierung(0);
	}
}
@-webkit-keyframes blurFadeIn {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		-webkit-transform: Skalierung(1.3);
	}
	50 % {
		Deckkraft: 0,5;
		Textschatten: 0px 0px 10px #fff;
		-webkit-transform: Skalierung(1.1);
	}
	100 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		-webkit-transform: Skalierung(1);
	}
}
@-webkit-keyframes fadeInBack {
	0% {
		Deckkraft: 0;
		-webkit-transform: Skalierung(0);
	}
	50 % {
		Deckkraft: 0,4;
		-webkit-transform: Skalierung(2);
	}
	100 % {
		Deckkraft: 0,2;
		-webkit-transform: Skalierung(5);
	}
}
@-webkit-keyframes fadeInRotate {
	0% {
		Deckkraft: 0;
		-webkit-transform: Skalierung (0) Drehen (360 Grad);
	}
	100 % {
		Deckkraft: 1;
		-webkit-transform: Skalierung(1) Drehen(0 Grad);
	}
}
/**/

@-moz-keyframes blurFadeInOut {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		-moz-transform: Skala(1.3);
	}
	20 %, 75 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		-moz-transform: Skalierung(1);
	}
	100 % {
		Deckkraft: 0;
		Textschatten: 0px 0px 50px #fff;
		-moz-transform: Skalierung(0);
	}
}
@-moz-keyframes blurFadeIn {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		-moz-transform: Skala(1.3);
	}
	100 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		-moz-transform: Skalierung(1);
	}
}
@-moz-keyframes fadeInBack {
	0% {
		Deckkraft: 0;
		-moz-transform: Skalierung(0);
	}
	50 % {
		Deckkraft: 0,4;
		-moz-transform: Skalierung(2);
	}
	100 % {
		Deckkraft: 0,2;
		-moz-transform: Skalierung(5);
	}
}
@-moz-keyframes fadeInRotate {
	0% {
		Deckkraft: 0;
		-moz-transform: Skalierung (0) Drehen (360 Grad);
	}
	100 % {
		Deckkraft: 1;
		-moz-transform: Skalierung (1) Drehung (0 Grad);
	}
}
/**/

@keyframes verwischenAusblenden {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		transformieren: Skalierung (1,3);
	}
	20 %, 75 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		transformieren: Skalierung(1);
	}
	100 % {
		Deckkraft: 0;
		Textschatten: 0px 0px 50px #fff;
		transformieren: Skalierung(0);
	}
}
@keyframes blurFadeIn {
	0% {
		Deckkraft: 0;
		Textschatten: 0px 0px 40px #fff;
		transformieren: Skalierung (1,3);
	}
	50 % {
		Deckkraft: 0,5;
		Textschatten: 0px 0px 10px #fff;
		transformieren: Skalierung(1.1);
	}
	100 % {
		Deckkraft: 1;
		Textschatten: 0px 0px 1px #fff;
		transformieren: Skalierung(1);
	}
}
@keyframes fadeInBack {
	0% {
		Deckkraft: 0;
		transformieren: Skalierung(0);
	}
	50 % {
		Deckkraft: 0,4;
		transformieren: skalieren(2);
	}
	100 % {
		Deckkraft: 0,2;
		transformieren: Skalierung(5);
	}
}
@keyframes fadeInRotate {
	0% {
		Deckkraft: 0;
		transformieren: skalieren (0) drehen (360 Grad);
	}
	100 % {
		Deckkraft: 1;
		transformieren: skalieren (1) drehen (0 Grad);
	}
}