css поворот анимации ключевого кадра возвращается к 0 градусам после завершения (отменяется) - PullRequest
Новая
       80

css поворот анимации ключевого кадра возвращается к 0 градусам после завершения (отменяется)

0 голосов
/ 07 апреля 2020

Это вопрос css специально - спасибо. Итак, в анимации ключевых кадров я перевожу и вращаю. Оба работают, но вращение поворачивается на 365 градусов, а затем быстро отменяется. Я думаю, что я что-то упустил, если c. Спасибо за вашу поддержку и советы. 

    <!-- in html -->
    <div class="batgroup">
        <img id="batgirl" src="imgs/batgirl-ts.png">
    </div>

/** in css file **/ 
    #batgirl {
        position: absolute;
        left: 1080px; 
        top: 320px;
        z-index: 2; 
        animation-direction: forward; 
        animation: peoplemove 4s 0s linear forwards; 
      }

    @keyframes peoplemove{

        50% {
            transform: translate(-150px, -70px) ;   
        }

        75% {
            transform: translate(-250px, 0px) rotate( -360deg) ;
        }
        100% {
            transform: translate(-350px, -70px) ;       
        }
    } /* end keyframe */

1 Ответ

0 голосов
/ 07 апреля 2020

Если вы не помещаете rotate () в положение анимации 100%, это предполагает, что вы хотите повернуть обратно на ноль градусов, это можно просто исправить, установив еще один rotate (). 

@keyframes peoplemove{

    50% {
        transform: translate(-150px, -70px) ;   
    }

    75% {
        transform: translate(-250px, 0px) rotate( -360deg) ;
    }
    100% {
        transform: translate(-350px, -70px) rotate( -360deg) ;       
}
...