Wie man Text Fade in CSS

Erstellung von Keyframes in CSS ermöglicht es, einen Teil Ihrer Webseite zu animieren. Nachdem Sie Keyframes im Stylesheet erstellt haben, werden sie zur Wiederverwendung auf möglichst viele Seitenelemente wie Sie wollen. Ausblenden von Text in CSS erfordert einen Keyframing-Code, der wird Transparenz zum vollen an einem Punkt in der Animation und ändert sie in völliger Transparenz an einer anderen Stelle.

Anweisungen

1 Öffnen Sie in Editor oder einem Codeeditor das Stylesheet für Ihre Webseite. Wenn Ihre Webseite nicht noch vorhanden ist, erstellen Sie eine leere Datei und speichern Sie es als "style.css." Fügen Sie diese Zeile nach "< Titel >" Tags in den HTML-Code Ihrer Webseite das Stylesheet hinzufügen:

< link Rel = "Stylesheet" href="path/to/style.css" Type = "Text/Css" / >

Ändern Sie "path/to/style.css" auf den Pfad der Datei, der in Ihrem Stylesheet führt.

2 Erstellen Sie eine Keyframe-Animation im Stylesheet mithilfe der folgenden Syntax:

@keyframes Fade-Text {}0 %, 100 % {}}50 % {}}}

Fügen Sie CSS-Eigenschaften wie "Farbe" oder "Deckkraft" innerhalb der geschweiften Klammern neben die Prozentsätze. Jede Prozentzahl im Schlüsselbild vertritt eine Position innerhalb der Animation oder einen Keyframe. Festlegen der Anfangs- und Endposition Positionen auf dieselben Eigenschaften können Sie die Animation reibungslos Schleife.

3 Legen Sie jeden Keyframe auf einen anderen Deckkraft:

@keyframes Fade-Text {}0 %, 100 % {}

opacity: 1;

}50 % {}

opacity: 0;

}}

"Deckkraft" gleich eins für Anfang und Ende dieser Animation zu machen, stellen Sie es starten und stoppen auf volle Deckkraft. Eine NULL Opazität an der 50-Prozent-Marke wird die Animation ausgeblendet komplett auf halbem Weg durch; Legen sie auf Dezimalpunkt Werte wie "0.5", wenn Sie nicht, die Animation immer unsichtbar geworden möchten.

4 Schreiben Sie eine neue Formatierungsregel für den Text, dass Sie eine Ausblend-Animation auf tun möchten:

{Fading_text} }

Im Beispiel ist "#fading_text" ein ID-Selektor, der jeden Tag findet auf der Seite mit der ID "Fading_text." Öffnen Sie die Webseite und sehen Sie sich den Code zu finden, oder fügen Sie eine ID für die Tags, die Ihren Text umgeben. Tags wie folgt hinzufügen, wenn Sie Markierungen benötigt: < span-Element-Id = "Fading_text" > Text animieren < / span >.

5 Rufen Sie die Keyframe-Animation innerhalb des Stilregel:

{Fading_text} Animation: Fade-Text 10 s unendlich;}

Der erste Wert ist der Name des Ihrem Keyframe, gefolgt von der Dauer in Sekunden und dann eine Wiederholung geben. Eine unendliche Wiederholung einer Schleife die Animation immer und immer wieder; Ersetzen Sie dies durch eine ganze Zahl wie "10" eine endliche Anzahl von Schleifen angeben.

6 Durchlaufen Sie, und Duplizieren Sie die Keyframe-Animation selbst und alle Aufrufe an die Animation. Sie müssen eine Kopie des Codes mit dem Präfix "-Webkit" und ein weiteres Exemplar mit dem Präfix "-Moz" Code mit Chrome, Safari und Firefox kompatibel zu:

bei Webkit-Keyframes einblenden-Text {}0 %, 100 % {}

opacity: 1;

}50 % {}

opacity: 0;

}}bei-Moz-Keyframes einblenden-Text {}0 %, 100 % {}

opacity: 1;

}50 % {}

opacity: 0;

}}

{Fading_text} -Webkit-Animation: Fade-Text 10 s unendlich;-Moz-Animation: Fade-Text 10 s unendlich;}

Tipps & Warnungen

• Kippen Sie Deckkrafteinstellungen in Ihren Keyframes, also der erste Keyframe eine NULL Opazität hat und die zweite volle Deckkraft hat. Dadurch wird den Text auf die Seite zu verblassen.
• Im Browser Internet Explorer 9 und darunter, Ihr Text wird nicht animiert. Dies ist, weil dieser Browser nicht kompatibel mit Keyframe-Animationen. Allerdings wird der Text noch auf der Seite angezeigt.