Übergang von links in CSS einschieben
Das Erstellen von Verhaltensweisen für Übergänge und Animationen war eine der Innovationen von CSS3. Seit Jahren fordern Frontend-Entwickler die Möglichkeit, diese Interaktionen mit HTML und CSS statt mit JavaScript oder Flash zu erstellen.
Wenn sich der Zustand eines Elements ändert, z. B. darüber schwebend, fokussiert, aktiv oder gezielt, können Sie CSS3-Übergänge verwenden, um sein Aussehen und Verhalten zu ändern.
Mit CSS3-Animationen können Sie das Aussehen und Verhalten eines Elements in zahlreichen Keyframes ändern. Übergänge ermöglichen es Ihnen, von einem Zustand in einen anderen zu wechseln, während Animationen viele Übergangspunkte basierend auf unterschiedlichen Schlüsselbildern festlegen.
In diesem Artikel sehen wir uns Beispiele für CSS-Slide-Ins von links an.
Übergang von links in CSS einschieben
Dieses Beispiel verwendet translateX und translateY, um das Element von Punkt A nach B zu verschieben. Mit der Funktion translate können Sie das Element über die Ebene (x- und y-Achse) verschieben.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Slide-in Transition</title>
</head>
<style>
.element {
width: 200px;
height: 200px;
background: blue;
animation: moveToRight 1s ease-in-out;
animation-delay: 10ms;
}
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
</style>
<body>
<div class="element"></div>
</body>
</html>