CSS keyframe animation for news panels

Question

I am currently looking at doing some simple animations on a set of news panels that i would like to slide in from top / bottom but currently they first show the panel in the final position and then do the animation. Is it possible to have them slide in without showing them in their final position first, also, would there be an easier way to do these animations instead of using the large amounts of keyframe code?

.box1 {
  width: auto;
  min-width: 185px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 #000;
  position: relative;
  left: 3em;
  padding: 10px;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  0% {
    background-color: white;
    left: 3em;
    top: 200px;
    opacity: 0%;
  }
  100% {
    background-color: white;
    left: 3em;
    top: 0px;
    opacity: 100%;
  }
}

.box2 {
  width: auto;
  min-width: 185px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 #000;
  position: relative;
  left: 4em;
  padding: 10px;
  animation-name: example2;
  animation-duration: 2s;
  animation-delay: 1s;
}

@keyframes example2 {
  0% {
    background-color: white;
    left: 4em;
    bottom: 200px;
    opacity: 0%;
  }
  100% {
    background-color: white;
    left: 4em;
    bottom: 0px;
    opacity: 100%;
  }
}

.box3 {
  width: auto;
  min-width: 185px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 #000;
  position: relative;
  left: 5em;
  padding: 10px;
  animation-name: example3;
  animation-duration: 2s;
  animation-delay: 2s;
}

@keyframes example3 {
  0% {
    background-color: white;
    left: 5em;
    top: 200px;
    opacity: 0%;
  }
  100% {
    background-color: white;
    left: 5em;
    top: 0px;
    opacity: 100%;
  }
}

.box4 {
  width: auto;
  min-width: 185px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 #000;
  position: relative;
  left: 6em;
  padding: 10px;
  animation-name: example4;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes example4 {
  0% {
    background-color: white;
    left: 6em;
    top: 200px;
    opacity: 0%;
  }
  100% {
    background-color: white;
    left: 6em;
    top: 0px;
    opacity: 100%;
  }
}

<div class="about-section-two">
  <div class="row news-section" style="display: flex; padding: 4% 0; flex-direction: row; flex-wrap: wrap;">
    <div class="box1">
      <h3>News header</h3>
      <p>lorum text</p>
    </div>
    <div class="box2">
      <h3>News header</h3>
      <p>lorum text</p>
    </div>
    <div class="box3">
      <h3>News header</h3>
      <p>lorum text</p>
    </div>
    <div class="box4">
      <h3>News header</h3>
      <p>lorum text</p>
    </div>
  </div>
</div>

Answer 1

You are making it too complicated.

you don't need box1, box2, etc. give box class to all boxes and use this css which is optimised. using transform: translate() and CSS variables.

CSS

.box {
  width: auto;
  min-width: 185px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 #000;
  position: relative;
  left: calc(3em + (1em * var(--child)));
  padding: 10px;
  --child: 0;
  transition: opacity 1s linear, transform 1s linear
  transform: translateY(200px)
  opacity: 0;
}

.box:nth-child(2){--child: 1; transform: translateY(-200px)}
.box:nth-child(3){--child: 2}
.box:nth-child(4){--child: 3; transform: translateY(-200px)}
.box:nth-child(5){--child: 4}
.box.shown{
transform: translateY(0px);
opacity: 1;
}

JS

delay = 0 /*millisecond*/
document.querySelectorAll('.box').forEach((e)=>{
   setTimeout(()=>{
      e.classList.add('shown');
   }, delay)
   delay += 1000
})

You should know that you should only write properties that are going to change during animation,I corrected it and just used opacity and transform which are going to be changed.

Let me know if I could be helpful! ;)