Html 使用CSS3设置长方体动画

我需要用CSS3制作一个下落的盒子的动画。盒子应该在屏幕的中间。它应该从顶部开始动画，离开屏幕，从底部达到25px。我试过这个：

.box {
    width : 112px;
    height : 112px;
    background : url(images/gift_box_small.png) no-repeat;
    margin : auto;
    z-index : 4;
    position : relative;

    /* Chrome, Safari, Opera */
    -webkit-animation : box_fall 8s linear 1;

    /* Standard syntax */
    animation: box_fall 8s linear 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes box_fall {
    0%   {top:-112px;}
    100% {bottom:25px}
}

/* Standard syntax */
@keyframes box_fall {
    0%   {top:-112px;}
    100% {bottom:25px}
}

但是动画没有开始。原因是什么？我如何才能让它工作？下面是一个JSFIDLE：

---

谢谢大家!

最好的方法可能是设置同一属性的动画，而不是两个属性的组合（例如，从开始值到结束值设置

top

动画，而不是从

top

开始，以

bottom

结束-这可能会出现跨浏览器问题）。比如：

@keyframes box_fall {
    0%   {top:-15%;}
    100% {top: 80%;}
}

我使用了百分比，以防您不知道屏幕大小（这可能就是您首先使用

bottom

的原因）。稍微调整一下数字就可以了

请看这里：

---

更新

为了确保箱子始终落在地面上，必须将其更改为绝对位置，并正确居中：

left: 0;
top: auto;
bottom: 25px; /* the end position */
right: 0;

然后，只需从顶部设置动画：

@keyframes box_fall {
  0%   {bottom: 100%;}
  100% {bottom: 25px;}
}

---

在这里查看：

动画对我来说确实很有用（尽管开始和结束位置并不完全符合你的需要），没有任何变化。@Harry，这很奇怪。。。我在FF中测试它，它不是从那里开始的。我是在Chrome中测试的。也许您需要

-moz关键帧

和

-moz动画

。其他的云动画能工作吗？@Harry是的，云动画工作得很好。只是不能让盒子按照需要动画化……我也尝试过这个方法，但是问题是当屏幕尺寸很小（例如水平的手机屏幕）时，盒子掉到屏幕下面，我需要它在“地面”div的中间停止。

bottom:110%

到

bottom:0%

（同样，这些数字可能需要一些调整）？忘了提到：结尾的数字1不是延迟，而是迭代次数-我只想播放一次。啊，对不起。我从底部看。。。但底部100%和底部25px正是OP想要的。是这样吗，@Igal？哦，对不起，没有看到更新。您的解决方案实际上更好，因为它不使用任何包装器div，这意味着要加载的代码更少。回答得好！非常感谢！：）