Implementieren Sie den Übergang zum Ausblenden mithilfe von CSS
- CSS-Fade-Übergang
- Ausblenden mit der Animationseigenschaft
- Ausblenden mit der Übergangseigenschaft
- Ausblenden mit Inline-CSS
- Ausblenden mit externem CSS
- Ausblenden mit Dom-Events
In diesem Artikel lernen wir etwas über Fade-Out-Animation und wie man sie mit internem, externem und Inline-CSS implementiert. Später sehen wir uns an, wie DOM-Ereignisse verwendet werden, um die Fade-out-Funktionalität zu implementieren.
CSS-Fade-Übergang
Ein CSS-Fade-Übergang ist ein visueller Effekt, bei dem ein Element, z. B. ein Bild, Text oder Hintergrund, allmählich auf der Seite erscheint oder verschwindet.
Um diese Effekte zu erzeugen, wird entweder die CSS-Übergangseigenschaft oder die Animationseigenschaft verwendet. Mit der Übergangseigenschaft können Sie nur einen Anfangs- und einen Endzustand angeben.
Der Unterschied zwischen CSS-Übergängen und Animationen besteht darin, dass die Übergänge einen Auslöser benötigen, z. B. einen Benutzer, der mit der Maus über ein Element fährt, Animationen jedoch nicht. Wenn die Seite geladen wird, beginnt das Standardverhalten einer Animation sofort mit ihrer Sequenz.
Sie können es jedoch verzögern, indem Sie den Parameter animation-delay verwenden. Dieser Artikel konzentriert sich nur auf FadeOut.
Mal sehen, wie wir den Fade-Out-Übergang mit CSS erreichen können.
Ausblenden mit der Animationseigenschaft
Wie oben besprochen, kann die fadeOut-Funktionalität sowohl durch die Übergangs- als auch durch die Animations-Eigenschaften von CSS erreicht werden. Beginnen wir damit, die Funktionalität mit der Eigenschaft animation zu erstellen.
Code:
<html>
<head>
<style>
.fade {
animation: fadeOut 5s;
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade"> Internal CSS Fade Out using Animation !</div>
</body>
</html>
Zuerst weisen wir dem div eine Klasse fade zu. Das gesamte Styling wird in diesem Kurs durchgeführt.
Wir steuern jetzt auf das Tag style zu. Die erste Eigenschaft, die wir in der Klasse aufrufen, ist animation: fadeOut 5s, und diese Eigenschaft ermöglicht es Ihnen, kreative Animationen auf Ihren Webseiten zu erstellen.
fadeOut ist der Animationsname und 5s ist die Animationsdauer, die die Dauer definiert, die eine Animation dauern sollte, um einen Zyklus abzuschließen. Dann haben wir Keyframes auf dem Animationsnamen fadeOut verwendet.
Die Keyframes werden verwendet, um die Animationsregel zu bestimmen. Wir geben an, dass bei 0 % die Deckkraft/Transparenz des Elements 1 ist, was 100 % bedeutet, da die Deckkrafteigenschaft des CSS einen Wertebereich von 0 bis 1 hat, und die Deckkraft bei 100 % 0 ist, was den Text bedeutet erscheint mit vollständiger Sichtbarkeit und verblasst langsam.
Ausblenden mit der Übergangseigenschaft
Lassen Sie uns die Funktionalität mit der CSS-Eigenschaft transition implementieren. Die Eigenschaft Übergang benötigt eine Triggerfunktion wie Hover, Fokus usw., um zu funktionieren.
Code:
<html>
<head>
<style>
.fadeOut:hover {
opacity: 10%;
transition: opacity 3s;
}
}
</style>
</head>
<body>
<div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
</body>
</html>
Im obigen Code schreiben wir transition: opacity 3s. Die erste Untereigenschaft des Übergangs ist die Übergangseigenschaft, die die Namen der CSS-Eigenschaften angibt, auf die Übergänge angewendet werden sollen.
Die zweite Untereigenschaft ist die Übergangsdauer, die die Dauer angibt, über die Übergänge stattfinden sollen. Wir sagen also einfach, dass, wenn ein Benutzer den Cursor auf den Text platziert, die Deckkraft des Textes in der angegebenen Dauer 10 % betragen sollte.
Ausblenden mit Inline-CSS
Inline-CSS gibt den HTML-Elementen innerhalb ihrer Tags Stile. Inline-CSS wird nicht empfohlen, da wir nicht alle Eigenschaften innerhalb des HTML-Tags verwenden können.
Code:
<html>
<head>
<style>
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
</body>
</html>
Da wir den Code mit Inline-CSS schreiben, könnte hier die Frage lauten, warum wir keine Keyframes in das div-Tag geschrieben haben. Da Keyframes nicht Teil der HTML-Elemente sind, werden sie bei Animationen aufgerufen.
Ausblenden mit externem CSS
Externe Stylesheets werden in unabhängigen Dateien mit der Erweiterung .css erstellt. Ein externes Stylesheet ist eine Liste von CSS-Regeln, in der keine HTML-Tags verwendet werden können.
Ein externes Stylesheet kann durch einen link-Tag verlinkt werden, der im head-Tag einer HTML-Seite platziert wird. Eine einzelne HTML-Seite kann beliebig viele externe Stylesheets verwenden.
Erstellen Sie beispielsweise eine Datei mit dem Namen style.css oder einem beliebigen Namen und kopieren Sie den style-Tag-Code aus den obigen Beispielen in die Datei. Wir müssen die CSS-Dateireferenz zu unserer HTML-Seite hinzufügen.
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="fade">External CSS Fade Out !</div>
</body>
</html>
Ausblenden mit Dom-Events
Eine andere Methode, um die Ausblendfunktion zu erreichen, ist die Verwendung der DOM-Ereignisse onMouseOver und onMouseOut. Das Ereignis onMouseOver wird ausgelöst, wenn der Mauszeiger auf ein Element bewegt wird, und das Ereignis onMouseOut tritt ein, wenn sich die Maus von dem Element entfernt.
Code:
<html>
<head></head>
<body>
<div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
I will fade out on mouse hover
</div>
</body>
</html>
Für das Ereignis onMouseOver setzen wir die Deckkraft auf 10%. Angenommen, Sie möchten das Element vollständig ausblenden und die Deckkraft auf 0 setzen.
Der Text wird ausgeblendet, wenn der Cursor darüber ist, wie in der Ausgabe zu sehen, und kehrt dann an seine ursprüngliche Position zurück, wenn der Cursor entfernt wird.