Анимация коробки с CSS3

Question

Мне нужно анимировать падающую коробку с CSS3. Коробка должна быть посередине экрана. Он должен начинать анимацию сверху, с экрана и достигать 25 пикселей снизу. Я пробовал:

.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 и заканчивая 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/