css - 根据屏幕尺寸更改 CSS top 值

Question

当使用 CSS 弹跳关键帧时，我将弹跳的顶部设置为 870px，但是如果我重新调整窗口大小，对象可以弹跳超过窗口的边界，有没有办法改变边界屏幕尺寸。

@-webkit-keyframes bounce{
    from, to{
        top: 0;
        -webkit-animation-timing-function: ease-in;
    }
    50%{
        top: 870px; /*value in question*/
        -webkit-animation-timing-function: ease-out;
    }
}

Answer 1

使用视口(viewport)单位允许动画缩放到屏幕大小。感谢@Manoj Kumar 将我介绍给他们。