CSS анимация: поворот SVG и преобразование применяются при наведении: угол поворота сбрасывается при наведении - PullRequest
Новая
       14

CSS анимация: поворот SVG и преобразование применяются при наведении: угол поворота сбрасывается при наведении

0 голосов
/ 15 февраля 2019

У меня есть 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);
    }
}
...