How to Slide in From Left Transition in CSS
Creating behaviors for transitions and animations was one of CSS3’s innovations. For years, front-end developers have been requesting the option to build these interactions using HTML and CSS instead of JavaScript or Flash.
When an element’s state changes, such as hovering over, focused on, active, or targeted, you can use CSS3 transitions to modify its appearance and behavior.
CSS3 animations allow you to change the appearance and behavior of an element in numerous keyframes. Transitions allow you to go from one state to another, whereas animations establish many transition points based on distinct keyframes.
We’ll look at CSS slide-in from left transition examples in this article.
Slide in From Left Transition in CSS
This example uses translateX and translateY to move the element from point A to B. The translate function lets you move the element across the plane(x- and y-axis).
<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>