Wann immer wir den Stil eines Elements schrittweise ändern möchten, indem wir von einem Stil zum anderen übergehen, sei es durch Benutzerinteraktion oder durch die auf der Website verbrachte Zeit. Mithilfe von Animationen können Sie viele Stile über einen beliebigen Zeitraum hinweg ändern. Werfen wir einen Blick auf die Animationseigenschaften, die Sie benötigen.
Keyframes− Dies wird verwendet, um die Animation eines Elements festzulegen. Es enthält die Änderungen, die am Stil des Elements vorgenommen werden. Das Element wechselt dann von dem Stil, in dem es sich zu Beginn befand, in den zuletzt genannten Stil.
Animationsname – Dies wird zum Referenzieren von Animationen verwendet, sodass Sie die Regeln nicht jedes Mal angeben müssen, wenn Sie eine Animation hinzufügen.
Animationsdauer – Dies gibt die Dauer der auf das Element angewendeten Animation an. Sein Anfangswert beträgt 0 ms und kann unbegrenzt fortgesetzt werden.
Animation-iteration-count − Dies bestimmt, wie oft die Animation wiederholt wird.
Animationsverzögerung − Wenn Sie die Animation um einige Zeit verzögern müssen, können Sie diese Eigenschaft verwenden.
Animationsrichtung – Dies gibt an, ob die Animation in einer Vorwärtsrichtung, einer Rückwärtsrichtung oder zwischen den beiden Richtungen erfolgen muss.
Animation Time Function − Verwenden Sie diese Eigenschaft, wenn die Animation am Anfang, in der Mitte und am Ende unterschiedliche Zeitintervalle haben soll.
Wir können auch die Abkürzungseigenschaft „Animation“ verwenden, die aus all diesen Eigenschaften besteht. Es funktioniert auf allen Elementen, ist aber nicht vererbbar. Es ist wichtig zu beachten, dass bei der Verwendung der Abkürzungsschreibweise die Reihenfolge der Werte wichtig ist, da jeder Wert je nach Reihenfolge unterschiedlich interpretiert wird.
Ein Beispiel für die Verwendung von Animationen in CSS ist unten dargestellt.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Da wir nun wissen, was Animation in CSS ist, besprechen wir, wie man ein div-Element animiert, um seine Breite schrittweise zu ändern.
Wir werden das Übergangsattribut verwenden, um dieses Problem zu lösen. Dieses Attribut wird verwendet, um Übergangseffekte zu Elementen hinzuzufügen. Es handelt sich um eine Abkürzungseigenschaft, die in CSS verfügbar ist.
Es definiert den Übergang, der auftritt, wenn eine Animation stattfindet und ein Element von einem Zustand in einen anderen wechselt. Es gilt für alle Elemente und ist nicht vererbbar.
Die folgenden Eigenschaften bilden die abgekürzten Übergangseigenschaften.
Transition-delay – Diese Eigenschaft gibt an, wie lange der Browser warten muss, bevor er Übergangseigenschaften anwendet. Sein Anfangswert ist 0, positive Werte verlängern die Wartezeit und negative Werte beschleunigen den Übergang.
Übergangsdauer – Dies legt die Zeitdauer fest, für die der Übergangseffekt sichtbar ist, nach der die Animation endet. Der Standardwert dieser Eigenschaft ist 0, sodass die Animation standardmäßig unsichtbar ist.
Transition-property − Legt das Element fest, auf das der Übergangseffekt angewendet wird. Es kann zwei mögliche Werte haben: none und all. Standardmäßig ist der Wert auf „all“ eingestellt, sodass auf alle Elemente der Übergangseffekt angewendet wird. „None“ bedeutet jedoch, dass keine Elemente diesen Übergangseffekt haben.
Übergangszeitfunktion − Diese Eigenschaft wird verwendet, um die Übergangsgeschwindigkeit am Anfang, in der Mitte und am Ende der Animation zu steuern. Der Anfangswert ist auf „ease“ eingestellt, aber CSS verfügt über viele vordefinierte Zeitfunktionen.
Wir können die Übergangseigenschaft auf den Hover-Status festlegen und die Animation wird beim Hover oder mithilfe der Aktivitätspseudoklasse ausgelöst. Wir können JS auch verwenden, um Klassen dynamisch zuzuweisen und sie zum Auslösen von Übergängen zu verwenden.
Ein einfaches Beispiel für die Verwendung des Übergangsattributs in CSS ist unten dargestellt.
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
<a>This text will have its font modified on hover</a>
</body>
</html>
Wenn Sie das obige Programm ausführen, wird ein Textstück angezeigt. Wenn Sie mit der Maus darüber fahren, können Sie den Übergangseffekt des Textes sehen.
Wir werden nun ein Beispiel für die Verwendung von Übergängen zur Lösung des vorliegenden Problems sehen.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<h1>Example of using transition property to increase width gradually on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
Die Ausgabe des obigen Programms ist eine div Box, deren Breite sich in 2 Sekunden schrittweise von 150 Pixel auf 500 Pixel ändert.
Zusammenfassend lässt sich sagen, dass die Verwendung des Hover-Selektors von CSS zum schrittweisen Ändern der Breite eines Partitionselements eine effiziente Möglichkeit ist, subtile Animationseffekte hinzuzufügen, ohne dass zusätzlicher Code erforderlich ist. Dies ist besonders nützlich, wenn Sie interaktive Elemente auf Webseiten erstellen, beispielsweise Schaltflächen und Menüs. Mit nur wenigen Codezeilen können Sie dynamische Effekte erstellen, um Ihre Seiten hervorzuheben.
Das obige ist der detaillierte Inhalt vonWie kann man die Breite schrittweise ändern, indem man in CSS mit der Maus über ein geteiltes Element fährt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
