你不能跟随Javascript中的CSS动画循环。但是你可以使用一个计时器来伪造它。因为你的动画循环需要6秒，你可以使用一个6秒长的超时来在循环结束时停止动画。
为了防止开头和结尾处闪烁，还需要一些额外的东西：
1.同时在长方体上设置初始变换
1.超时后，添加一个新的类，它具有最后一个关键帧的变换。
具体操作如下：
第一个

我认为您必须从animation属性中删除infinite，并忘记onanimationiteration，因为这似乎不是您想要的。

<style>
    .box {
        width: 100px;
        height: 100px;
        background: #000;
    }

    .animate {
        animation: animation 6s;
    }

    @keyframes animation {
        0% {
            transform: scale(.3);
        }
        50% {
            transform: scale(.6) rotate(-45deg);
            background: red;
        }
        100% {
            transform: scale(1) rotate(180deg);
            background: blue;
        }
    }
</style>

<div class="box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var $box = $('.box');
    $box.addClass('animate');
    
    
    $box.on('animationend', function() {
      $box.removeClass('animate');
    });
</script>

如果没有jQuery，它将类似于：

<style>
    .box {
        width: 100px;
        height: 100px;
        background: #000;
    }

    .animate {
        animation: animation 6s;
    }

    @keyframes animation {
        0% {
            transform: scale(.3);
        }
        50% {
            transform: scale(.6) rotate(-45deg);
            background: red;
        }
        100% {
            transform: scale(1) rotate(180deg);
            background: blue;
        }
    }
</style>

<div class="box"></div>

<script>
    const box = document.querySelector('.box');
    box.classList.add('animate');
    
    box.addEventListener('onanimationend', function() {
        box.classList.remove('animate');
    });
</script>

你可以在mdn上查看更多关于这方面的信息。
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent