CSS анимация не играет гладко - PullRequest
Новая
       17

CSS анимация не играет гладко

0 голосов
/ 11 июля 2019

У меня есть элемент <button>, который требуется при нажатии этого элемента, кнопка перемещается вниз на 200px

используя этот код в onclick событии кнопки для добавления класса, поэтому анимация будет запускаться:

JS 

function anime() {
    var element = document.getElementById("tagd");
    element.classList.toggle("visible");    
}

HTML 

<button onclick="anime()" id="tagd">

CSS 

.visible {
    -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: normal; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s 2;
    animation-direction: normal;
    position: relative;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
} 

@keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
}

Итак, проблема в следующем:

  • Анимация идет вниз, затем возвращается в первую позицию.
  • Анимация не воспроизводится плавно (если вы запустите ее, вы увидите, что она воспроизводится пошагово, а не плавно)

Ответы [ 3 ]

0 голосов
/ 11 июля 2019

Измените эти строки в вашем коде, поставив 1 вместо 2 в конце этой строки. Надеюсь, это сработает для вас. 

-webkit-animation: myfirst 5s 1; /* Safari 4.0 - 8.0 */
 animation: myfirst 5s 1;
0 голосов
/ 11 июля 2019

Добавить свойство will-change: top в .visible класс

0 голосов
/ 11 июля 2019

Поскольку вы меняете только положение кнопки, я могу посоветовать вам следующее 

#tagd{ 
    transition: 5s transform
}
#tagd.visible{
    transform: translateY(200px) 
}

Анимация довольно проста, поэтому ее использование может повысить читабельность вашего кода. Немного тривиально, но использование «translate» вместо «top» также улучшает визуальные характеристики.

Узнайте больше об этом, если вам нравится: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

...