Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations:
/* LOGO MAIN STYLE */
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* ANIMATION FOR THE LOGO */
.App-logo {
animation-fill-mode: forwards, none;
animation-name: move-right, move-left;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, ease-in-out;
}
@keyframes move-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(200px);
}
}
@keyframes move-left {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200px);
}
}
The issue I am currently facing is that the initial animation doesn't seem to play as expected; it skips directly to the second animation.