Make element remain hidden during animation-delay in CSS

Question

I have an element that slides across the screen from what I would like to look like off the page and then slide and "land" on the opposite side. I've got the animation down but it seems that during the delay the image just sits on the page in waiting. The delay is because I have another animation that needs to finish before this one starts.

here is my CSS code and I am referencing it via class with a react front end

.tester{
  position: relative;
  animation-name: test_css_moving_sideways;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-direction: linear;
  left: 90%;
  animation-delay: 2s;  
}


@keyframes test_css_moving_sideways {
  0% { left: 0px; top: 0px;}
  100% { left: 90%; top: 0px; }
}

Answer 1

1) To fix this you can set left property in the css so that it sits at 0% so then when your animation starts it doesnt have to move to a left of 0% (where your animation starts) because it will already be there :)

2) Add animation-fill-mode - this controls what happens at the end of the animation. Setting this value to forwards will apply the css from the end of the animation to the object

So amend your css to:

.tester{
  position: relative;
  animation-name: test_css_moving_sideways;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-direction: linear;
  left: 0%;
  animation-delay: 2s;
  animation-fill-mode: none, forwards;
}