问CSS动画。滑入10秒，然后无限地上下移动

EN

@keyframes slide-in {
    from{
        margin-right: -100px;
    }
    to{
        margin-right: 0;
    }
}
.ball{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    float: right;
    animation:  slide-in 10s forwards,/*forwards keeps the ball at final position*/
                shake-vertical 15s infinite 10s both;
                /*
                 * Two animations applied
                 * comma separated
                 * shake-vertical has a 10 second delay specified by '10s'
                 * the delay should be same as the duration of first animation
                */
}

@keyframes slidein {
0% {
  transform: translateX(100vw);
}
100% {
  transform: translateX(50vw);
}
}
   .slidein {
      animation-name:slidein;
      animation-duration:10s;
      animation-fill-mode: follow;
    }

    .shake {
      animation-name: shake-vertical;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }

  obj.addEventListener("animationend", function () {
    obj.classList.remove('slidein');
    obj.classList.add('shake');
  });

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slidein {
0% {
  transform: translateX(100vw);
}
100% {
  transform: translateX(50vw);
}
}

@keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}
#obj {
  position: relative;
  width: 50px;
  height: 50px;
  top: 50px;
  background-color:magenta;
  animation-delay:0s;
}

.slidein {
  animation-name:slidein;
  animation-duration:10s;
}

.shake {
  left: 50vw;
  animation-name:shake-vertical;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

</style>
</head>
<div id="obj" class="slidein"></div>
<script>
  var obj = document.getElementById('obj');
  obj.addEventListener("animationend", function () {
    obj.classList.remove('slidein');
    obj.classList.add('shake');
  });
</script>
</html>