CSS Animation doesn't play

December 9, 2022

I have been trying to do a simple animation in CSS. The app logo is supposed to move 200px to the right and then return, smoothly, to it’s original position. To do this I have written this for the 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 problem I am having is that the first animation never actually plays, it just skips to the second.

>Solution :

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation-name: move-right;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move-right {
  0%{
    transform: translateX(0%);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }
}