CSS iki animasyonu sıra sıra oynatmak

<div class="box"></div>
<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: red;
      position: relative;
    }

    .box:hover {
      background-color: blue;
      animation: animation 2s infinite;
    }

    @keyframes animation {
      0% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-20px);
      }
      50% {
        transform: translateY(20px);
      }
      75% {
        transform: translateX(-20px);
      }
      100% {
        transform: translateX(+20px);
      }
    }

</style>