html - 使用 CSS3 为盒子制作动画

Question

我需要使用 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}
}

但是动画没有开始。这可能是什么原因，我怎样才能让它发挥作用？这是一个 jsFiddle:http://jsfiddle.net/hpsxrjzL/

谢谢!

Answer 1

可能最好的方法是对相同的属性进行动画处理，而不是将两者结合起来(例如，将 top 从起始值动画化到结束值，而不是从 top 开始code> 并以 bottom 结尾——这可能会导致跨浏览器问题)。像这样的东西:

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

我使用百分比是为了防止您不知道屏幕尺寸(这可能是您首先使用 bottom 的原因)。稍微调整一下数字，应该没问题。

在这里查看:http://jsfiddle.net/hpsxrjzL/1/

---

更新

为了确保盒子始终落在地面上，必须将其更改为具有适当居中的绝对位置:

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

然后，它只是从顶部开始动画:

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

在这里查看:http://jsfiddle.net/hpsxrjzL/7/