如何使关键帧动画响应

Question

我正在尝试将一只鸟从第一格移到最后一个格。它需要触摸每个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之外，还有其他方法吗？