不知道怎样在旋转途中停下，求大神打救，自学了两个多月，还是好多不会

Question

@key frames rotate-7 {};
</style>
<div class="box">
    < img src="images2/1.jpg" alt="">
    < img src="images2/2.jpg" alt="">
    < img src="images2/3.jpg" alt="">
    < img src="images2/4.jpg" alt="">
    < img src="images2/5.jpg" alt="">
    < img src="images2/6.jpg" alt="">
</div>
<input type="button" value="开始" id="start">
<input type="button" value="停止" id="end">
<script>
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var imgs = document.getElementsByTagName("img");
   
    // 让每张图片旋转
    function fs() {
        for(var i = 0; i < imgs.length; i++) {
            imgs[i].style.animation = "rotate-1 2.5s infinite";
        }
        imgs[1].style.animationName = "rotate-2";
        imgs[2].style.animationName = "rotate-3";
        imgs[3].style.animationName = "rotate-4";
        imgs[4].style.animationName = "rotate-5";
        imgs[5].style.animationName = "rotate-6";
    }
    start.onclick = function () {
        fs();
    };
    end.onclick = function () {
        for(var i = 0; i < imgs.length; i++) {
            imgs[i].style.animationName = "rotate-7";
        }
    };
</script>

Answer 1

@keyframes rotate-1 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(60deg);
            }
            100% {
                transform: rotate(0deg);            }
        }
        @keyframes rotate-2 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(120deg);
            }
            100% {
                transform: rotate(0deg);            }
        }
        @keyframes rotate-3 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(0deg);            }
        }
        @keyframes rotate-4 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(240deg);
            }
            100% {
                transform: rotate(0deg);            }
        }
        @keyframes rotate-5 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(300deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
        @keyframes rotate-6 {
            0% {
                transform: rotate(0deg);            }
            50% {
                transform: rotate(360deg);
            }
            100% {
                transform: rotate(0deg);            }
        }

Answer 2

<style>
        .box {
            width: 350px;
            height: 200px;
            margin: 350px auto;
            position: relative;
        }
        img {
            width: 350px;
            height: 200px;
            position: absolute;
            transform-origin: right top;
        }