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开始并以{结尾{1}} - 这可能对跨浏览器问题持开放态度）。类似的东西：

bottom

如果您不知道屏幕尺寸，我会使用百分比（这可能就是您首先使用@keyframes box_fall { 0% {top:-15%;} 100% {top: 80%;} }的原因）。稍微调整数字，它应该没问题。

请在此处查看：http://jsfiddle.net/hpsxrjzL/1/

更新

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

bottom

然后，它只是从顶部制作动画：

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

请在此处查看：http://jsfiddle.net/hpsxrjzL/7/

使用CSS3动画一个框

1 个答案: