5.1 Farbänderung
CSS-Transitions erlauben es, Änderungen von Elementeigenschaften zu animieren und dabei sanfte visuelle Effekte zu schaffen. Jetzt schauen wir uns an, wie man Transitions verwendet, um Farbe, Größe und Position von Elementen zu ändern, und zeigen praktische Beispiele.
Die Farbänderung eines Elements mittels CSS-Transitions ist eine der häufigsten Anwendungen. Dazu kann die Änderung der Textfarbe, des Hintergrunds oder der Ränder eines Elements gehören.
Beispiel 1: Hintergrundfarbe ändern
Dieses Beispiel zeigt die Änderung der Hintergrundfarbe eines Elements, wenn der Mauszeiger darüber schwebt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hintergrundfarbe ändern</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: Element mit festen Abmessungen und Hintergrundfarbe.box:hover: beim Schweben des Mauszeigers ändert sich die Hintergrundfarbe sanft von Blau zu Grün innerhalb von 1 Sekunde mit der Timing-Funktion ease
Beispiel 2: Textfarbe ändern
Dieses Beispiel zeigt die Änderung der Textfarbe eines Elements, wenn der Mauszeiger darüber schwebt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textfarbe ändern</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
Code-Erklärung:
.text: Element mit anfänglicher Textfarbe.text:hover: beim Schweben des Mauszeigers ändert sich die Textfarbe sanft von Rot zu Violett innerhalb von 0.5 Sekunden mit einer linearen Timing-Funktion
5.2 Größenänderung
Die Größenänderung von Elementen mittels CSS-Transitions kann die Änderung der Breite, der Höhe oder beider Abmessungen gleichzeitig umfassen.
Beispiel 1: Breite ändern
Dieses Beispiel zeigt die Änderung der Breite eines Elements, wenn der Mauszeiger darüber schwebt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breite ändern</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: Element mit anfänglicher Breite von 100 Pixeln-
.box:hover: beim Schweben des Mauszeigers vergrößert sich die Breite des Elements sanft auf 200 Pixel innerhalb von 2 Sekunden mit der Timing-Funktionease-in-out
Beispiel 2: Höhe ändern
Dieses Beispiel zeigt die Änderung der Höhe eines Elements, wenn der Mauszeiger darüber schwebt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Höhe ändern</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Code-Erklärung:
.box: Element mit anfänglicher Höhe von 100 Pixeln.box:hover: beim Schweben des Mauszeigers vergrößert sich die Höhe des Elements sanft auf 200 Pixel innerhalb von 1.5 Sekunden mit der Timing-Funktionease
5.3 Positionsänderung
Die Positionsänderung von Elementen mittels CSS-Transitions kann die Verschiebung eines Elements mit den Eigenschaften
top, right, bottom, left oder Transformationen translate umfassen.
Beispiel 1: Verschieben mit left
Dieses Beispiel zeigt die Verschiebung eines Elements nach rechts, wenn der Mauszeiger darüber schwebt, mit Verwendung der Eigenschaft left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element verschieben</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: Element mit anfänglicher Positionleft: 0.box:hover: beim Schweben des Mauszeigers verschiebt sich das Element sanft nach rechts um 100 Pixel innerhalb von 2 Sekunden
Beispiel 2: Verschieben mit transform: translate
Dieses Beispiel zeigt die Verschiebung eines Elements nach rechts und unten, wenn der Mauszeiger darüber schwebt, mit Verwendung der Transformation translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verschieben mit transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Code-Erklärung:
.box: Element mit anfänglicher Transformationtranslate(0, 0).box:hover: beim Schweben des Mauszeigers verschiebt sich das Element sanft um 100 Pixel nach rechts und 50 Pixel nach unten innerhalb von 1 Sekunde
GO TO FULL VERSION