Проблема с анимацией css с шагами

Я хотел бы спросить, можно ли сделать css анимацию более гладкой? потому что теперь у меня есть проблема, что на каждом шаге моя анимация делает «перерывы», и это не такая приятная плавная анимация. Как вы можете себе здесь:Проблема с анимацией css с шагами

@-webkit-keyframes rocketStart { 
 
    0% { 
 
    transform: translate(0px, 0px) rotate(0deg); 
 
    } 
 
    5% { 
 
    transform: translate(0, 20px) rotate(20deg); 
 
    } 
 
    10% { 
 
    transform: translate(-10px, 40px) rotate(25deg); 
 
    } 
 
    20% { 
 
    transform: translate(-20px, 60px) rotate(40deg); 
 
    } 
 
    30% { 
 
    transform: translate(-45px, 80px) rotate(55deg); 
 
    } 
 
    40% { 
 
    transform: translate(-85px, 105px) rotate(68deg); 
 
    } 
 
    50% { 
 
    transform: translate(-195px, 135px) rotate(77deg); 
 
    } 
 
    100% { 
 
    transform: translate(-400px, 300px); 
 
    } 
 
} 
 
.rocket-move-one { 
 
    -webkit-animation-name: rocketStart; 
 
    animation-name: rocketStart; 
 
    -webkit-animation-duration: 5s; 
 
    animation-duration: 5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.rocket { 
 
    position: absolute; 
 
    width: 45px; 
 
    height: 92px; 
 
    left: 485px; 
 
    top: -50px; 
 
    background-color: red; 
 
}

<div style="width:100%; height:600px; position;relative;"> 
 
    <div class="rocket-move-one rocket"></div> 
 
</div>

источник

2016-06-16 johnny04501

Вопросы ищут код помощи должны включать короткий код, необходимый для его воспроизвести ** в самом вопросе ** предпочтительно в [** Фрагмент стека **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snip домашние питомцы/). См. [** Как создать минимальный, завершенный и проверяемый пример **] (http://stackoverflow.com/help/mcve) –

С определением ключевого кадра как конкретным и пошагово таким образом, наилучшим выбором будет использование 'animation-timing-function: linear'. Значение по умолчанию - «легкость», поэтому вы увидите более медленные старты, более быструю среднюю и более медленные концы * между каждым ключевым фреймом *. – Harry

Возможно, что-то вроде [этого] (https://jsfiddle.net/L53pzkwc/). – Harry

Попробуйте это:

.rocket-move-one { 
    animation-timing-function: linear; 
}

источник

2016-06-16 12:32:25 Zentryn

Использование animation-timing-function: linear; получить даже скорость анимации.

Возможно, вам потребуется настроить ключевые фреймы, как показано ниже, для более плавного перехода.

@-webkit-keyframes rocketStart { 
 
    0% { 
 
    transform: translate(0px, 0px) rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: translate(-195px, 135px) rotate(77deg); 
 
    } 
 
    100% { 
 
    transform: translate(-400px, 300px) rotate(0deg); 
 
    } 
 
} 
 
.rocket-move-one { 
 
    -webkit-animation-name: rocketStart; 
 
    animation-name: rocketStart; 
 
    -webkit-animation-duration: 5s; 
 
    animation-duration: 5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
} 
 
.rocket { 
 
    position: absolute; 
 
    width: 45px; 
 
    height: 92px; 
 
    left: 485px; 
 
    top: -50px; 
 
    background-color: red; 
 
}

<div style="width:100%; height:600px; position;relative;"> 
 
    <div class="rocket-move-one rocket"></div> 
 
</div>

источник

2016-06-16 12:35:51 Pugazh

просто использовать

-webkit-transition:all 1s ease;

и упомянуть animation-timing-function

источник

2016-06-16 12:37:07 Maharajan

Проблема с анимацией css с шагами

ответ

Смежные вопросы