CSS3动画弹跳效果: Combination of Percentage and Pixels

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

将position:relative 赋给您的page-1 类。然后两者都一样。像这样写:

.page-1{ position:relative; }

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