0
315
ViewsCSS left to right, reappear left animation
I have an image that I animated with CSS. It goes from -200px left to 2100px right and then starts over. What I want to do is when part of the image is disappearing to the right, I want that part to show on the left side and continue the animation.
Here is an example of what I want, you can see how part of the text that goes off-screen to the right reappears left and continues the animation. I want to do the same thing with CSS or JS.
Part of my code right now (I made it small - don't view full screen):
body {
background-color: pink;
width: 400px;
height: 200px;
}
.box {
position: absolute;
bottom: 50px;
left: 0px;
width: 200px;
height: 100px;
background-color: black;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(310%);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
·
Juan Pablo Isaza
Answer question