使元素在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;
}

Answer 2

Check codepen: https://codepen.io/sasssssha/pen/Nayzpg

You should create one more class (.testerAnimated) and add this classname to element with a js function(if you want animation in a certain time) or you can add it at once(in this case animation starts when page will be loaded). Check it:

  .testerAnimated{
  animation-name: test_css_moving_sideways;
  animation-duration: 4.5s;         //play with it
  animation-delay: 2s;  
  }    

  .tester{
  position: relative;
  animation-name: test_css_moving_sideways;
  left: 90%;
  visibility:hidden;  
}


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