Let HTML/CSS/JS sections fly in

I'm working on a website, now I want that when you scroll, the respective section flies in (from the left). I'm not really getting anywhere though, would be nice if someone can help me.

A section looks like this:

<section>
<h2>title</h2>
<div>Text and other elements</div>
</section>

CSS:

section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  animation: text 3s 1;
}


@media (max-width: 1012px) {
  section {
    width: 90%;
  }
}