Very simple CSS animation from left to right [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
How can I use CSS animation to move an image (in this case a GIF) from left (outside the screen) to right (outside the screen)?
The only thing that is important to me is that you can choose the speed, the animation will always repeat AND you can define how long you want to wait before the next repetition.
NO EaseIn or EaseOut, just a normal animation.
I have done some research on this, but have not found a satisfying solution anywhere.

Answer 1

Since the delay part of an animation is used only to determine when an element should begin the animation, it cannot be reused after each iteration of the animation (only the first time). Therefore, we'll need JavaScript to do what you're asking. Instead of the delay being included in the CSS, it will now be included in the JavaScript.
We trigger the animation to begin when the page first loads listening to the DOMContentLoaded event.
We listen for the animation ending using the animationend event. When this happens, we set the animation to none and then back to an empty string. This will essentially restart the animation.
The code for the animationend handler, as well as the code for the DOMContentLoaded handler, both occur within setTimeout calls, with the delay assigned to a variable.
const img = document.querySelector(".my-img");
const delay = 2000; // ms=
const handleDOMReady = () => {
window.setTimeout(() => {
img.classList.add("on");
}, delay);
}
const handleAnimationEnd = () => {
img.style.animation = "none"
window.setTimeout(() => {
img.style.animation = "";
}, delay)
}
img.addEventListener("animationend", handleAnimationEnd);
window.addEventListener("DOMContentLoaded", handleDOMReady);
html, body {
padding: 0;
margin: 0;
}
.my-img {
transform: translateX(-100%);
}
.my-img.on {
--speed: 2s;
animation: move var(--speed) linear forwards;
}
#keyframes move {
to {
transform: translateX(100vw);
}
}
<img class="my-img" src="http://placekitten.com/200/300" alt="cat">
jsFiddle