css - CSS3动画弹跳效果：百分比和像素的结合

Question

如果我将“from”值作为百分比和“to”值以像素为单位，则“反弹动画”无法按预期工作。

请在此处查看代码：http: //jsfiddle.net/xJ4xy/

有什么解决办法？（我尽量不使用javascript afap）

 <style type="text/css">
        @-webkit-keyframes A123 {
            0% {
              top:190px; /* from 190px to 20% doesn't work */
              top: 90%;/* this works */
            }
            100% {
                top:20%;
            }
        }
    </style>             

Answer 1

给出位置：相对于你的page-1班级。然后两者工作相同。像这样写：

.page-1{ 位置：相对；}

检查这个http://jsfiddle.net/xJ4xy/1/