CSS-Übergang mit mehreren Eigenschaften
Die Sprache, mit der eine Webseite gestaltet wird, heißt CSS, was für Cascading Style Sheets steht. CSS erklärt, wie HTML-Komponenten auf einem Bildschirm, Papier oder anderen Medien erscheinen sollen.
Über CSS wird viel Arbeit eingespart. Es kann das Design mehrerer Webseiten gleichzeitig verwalten.
In CSS-Dateien werden externe Stylesheets gehalten.
die Übergangs-Eigenschaft von CSS
CSS-Übergänge sind der schnellste (und sauberste) Weg, um Ihre Komponenten zu animieren. Erfahren Sie in diesem Tutorial, wie CSS-Übergänge funktionieren und wie Sie damit Animationen erstellen.
Wenn eine CSS-Eigenschaft im Laufe der Zeit von einem Wert zu einem anderen wechselt, findet ein Übergang statt. Vier CSS-Properties: transition-property, transition-duration, transition-timing-function und transition-delay werden zur Eigenschaft transition zusammengefasst.
Beispielcode:
.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay}
Sie können auch alle vier oben genannten Eigenschaften in nur einer Anweisung verwenden, wie im folgenden Codebeispiel gezeigt.
.selector {
transition: property duration timing-function delay;
}
Wie man den Übergang in CSS auslöst
CSS-Übergänge können sofort ausgelöst werden, indem Pseudoklassen wie hover (die aktiviert wird, wenn sich die Maus über einem Element befindet), focus (die aktiviert wird, wenn ein Benutzer in ein Eingabeelement klickt oder in ein Element hineintippt) oder aktiv (wird aktiviert, wenn der Benutzer auf das Element klickt).
Übergang auslösen Mit hover
Die Eigenschaft Übergang kann per hover ausgelöst werden, wie im folgenden Beispiel gezeigt.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
}
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 0.5s ease-out;
}
.button:hover {
background-color: lightgreen;
}
</style>
</head>
<body>
<button class="button">Trigger Transition with hover</button>
</body>
</html>
Ausgang:
Übergang mit Klick auslösen
Sie können einen Übergang mit einem Klick aktivieren, wie im folgenden Beispiel gezeigt. Mit nur einem Klick wird die Farbe Übergang aktiviert.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
}
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 0.5s ease-out;
}
.button.is-active {
background-color: lightblue;
}
</style>
</head>
<body>
<button class="button">Trigger Transition with click</button>
</body>
</html>
const button = document.querySelector('.button');
button.addEventListener('click', _ => button.classList.toggle('is-active'));
Ausgang:
Abschluss
Es gibt insgesamt vier Übergangs-Eigenschaften von CSS. Sie können die Übergangs-Eigenschaften von CSS separat verwenden und alle vier Eigenschaften in nur einer Anweisung verwenden, die im obigen Artikel erwähnt wurde.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn