Как сделать анимацию ключевых кадров адаптивной - PullRequest
Новая
       5

Как сделать анимацию ключевых кадров адаптивной

0 голосов
/ 18 января 2020

Я пытаюсь переместить птицу из первого дива в последний див. Это должно касаться элемента в каждом из div. Проблема в том, что он работает нормально, используя ключевые кадры в размерах экрана. Но на экранах других размеров движение не по тому же пути, как я хочу. Ниже приведен код для моего ключевого кадра: 

@keyframes flybird {
    0% {
        top: 0; left:0;
        transition: all 17s ease-out;
    }
    15% {
        transform: rotate(10deg);}
    25%{
        transition: all 17s ;
        transform: rotate(30deg);
        top: 450px; left:300px;
    }
    35%{
        top: 450px; left:300px;
    }
    45%{
        transition: all 17s ;
        transform: rotate(30deg);
        top: 850px; left:300px;
    }
    55%{
        top: 850px; left:300px;
    }
    65%{
        transition: all 17s ;
        transform: rotate(30deg);
        top: 1250px; left:300px;
    }
    75%{
        top: 1250px; left:300px;
    }
    100%{
        top: 1250px; left:300px;
    }

   }

Как мне сделать этот отзывчивым? Есть ли другой способ, кроме указания px для позиций в каждом%

...