用CSS3制作动画盒子

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

.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/

谢谢！

来源

2014-10-18 Igal

的'animation'确实为我工作（虽然开始和结束位置不完全匹配您的需求）没有任何变化。 – Harry 2014-10-18 07:06:37

@Harry这很奇怪......我在FF中测试它，它不会从那里开始。 – Igal 2014-10-18 07:25:09

我在Chrome中测试。也许你需要'-moz-keyframes'和'-moz-animation'。其他云动画是否有效？ – Harry 2014-10-18 07:28:26

也许最好的方法是将动画相同的属性，而不是例如两（这样的组合，从起始值动画top结束值，而不是从top开始，以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/

来源

2014-10-18 07:12:19 Shomz

我也试过这种方法，但问题是当屏幕尺寸很小（例如水平移动电话屏幕）框落在屏幕下方时，我需要它完全停止在“地面”分区中。 – Igal 2014-10-18 07:22:01

嗯，以及如何将其从底部：110％'到底部：0％'（也可能需要稍微调整）进行动画处理？ – Shomz 2014-10-18 07:28:17

忘了提及：最后的数字1并不是一个延迟，而是一系列迭代 - 我希望它只能播放一次。 – Igal 2014-10-18 07:28:29

用CSS3制作动画盒子

回答

相关问题