CSS动画：将svg旋转和变换应用于悬停：悬停时旋转角度会重置

Question

我有一个SVG，代表不断旋转的大炮（从-5度到-80度），并且我希望它在悬停时停止旋转并应用变换（比例-它看起来像是用卡通射击）办法）。一切正常，但旋转角度已重置为原始值：我希望它保持悬停时的角度。感谢您的提示。

.cannon {

    bottom: 60px;

    display: block;

    left: 2%;

    position: absolute;
    width: 10%;

    animation: cannon-change-pitch;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;

    transform-origin: 35% 80%;
}

.cannon:hover {

    animation: cannon-fire;
    animation-direction: alternate;
    animation-duration: 30ms;
    animation-iteration-count: 2;
}

@keyframes cannon-change-pitch {
    0% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(-80deg);
    }
}

@keyframes cannon-fire {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.2);
    }
}