CSS Animation — текст скользит слева направо

Я пытаюсь заставить текст скользить слева направо с задержкой. Он будет появляться из середины страницы, а не за пределы холста. Я могу легко заставить его работать, когда текст скользит со страницы.

Делать из середины экрана немного по-другому, и я что-то упускаю. Текст появляется при загрузке страницы (когда он должен быть скрыт). Я могу легко сделать это с помощью jQuery, но я уверен, что это более чем возможно сделать, используя только css. Вот что я получил до сих пор

HTML:

<div class = "slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

CSS:

.slide-right {
   width: 100%;
   overflow: hidden;
   margin-left: 400px;
   max-width: 500px
}

.slide-right h2 {
   animation: 2s slide-right;
   animation-delay: 2s;
}

@keyframes slide-right {
    from {
       margin-left: -500px;
    }

    to {
       margin-left: 0%;
    }
 }

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 400px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right;
  animation-delay: 2s;
}

@keyframes slide-right {
  from {
    margin-left: -500px;
  }

  to {
    margin-left: 0%;
  }
}

<div class = "slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

Спасибо