JavaScriptでスライドを作る！しかもスクリプトは1行

基本的な考え方

アニメーションはスタイルシートで行い。対象の要素群の先頭にだけ適用する。
アニメーションが終了するとイベントが発生するのでそれを監視する。
イベントの終了した要素を、その要素群の最後尾に移動する。

寺尾での回答

<style>
div {
  width: 800px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}

ul {
  white-space: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: inline-block;
  width: 400px;
  height: 200px;
  margin: 0;
  padding: 0;
}

li:first-of-type {
  animation-name: expansion;
  animation-duration: 2s;
  animation-timing-function:ease;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;  
}

@keyframes expansion{
  0% { margin-left:-200px; }
  100% { margin-left:-600px; }
}

</style>

<body>
<div>
  <ul>
    <li><img src="https://placehold.jp/400x200.png" alt="">
    <li><img src="http://placehold.jp/24/cc9999/993333/400x200.png" alt="">
    <li><img src="https://placehold.jp/400x200.png" alt="">
    <li><img src="http://placehold.jp/24/cc9999/993333/400x200.png" alt="">
    <li>WHAT's NEW! ^^; WHAT's NEW! ^^; WHAT's NEW! ^^;
  </ul>
</div>

<script>
document.querySelector ('ul')
  .addEventListener ('animationend',
    ({target: e})=> e.parentNode.appendChild (e), false);
</script>