Шкала анимации CSS3

Я пытаюсь анимировать div так, чтобы при загрузке страницы он имел масштаб (0,0) и анимировал масштаб (1,1). Проблема заключается в том, что после того, как анимация вступает в силу, div-шкалы снова 0. Я хочу, чтобы div был близок к масштабу (1,1) и оставался таким. Здесь мой CSS-код

@-moz-keyframes bumpin {
    0% { -moz-transform: scale(0,0); }
    100%   { -moz-transform: scale(1,1); }
}

.landing .board {
    -moz-transform: scale(0,0);
    -moz-transform-origin: 50% 50%;
}

.landing .board {
    -moz-animation-name: bumpin;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
}

Что я делаю неправильно?

Спасибо заранее Mauro

Ответы

Ответ 1

Вы ищете animation-fill-mode:forwards, который применяет последний ключевой кадр nimation к элементу, когда анимация выполнена. https://developer.mozilla.org/en/CSS/animation-fill-mode

-moz-animation-fill-mode: forwards

Ответ 2

Другой способ сделать это: если все, что вы хотите сделать, - это анимировать элемент масштабирования, вам не нужно использовать ключевые кадры. переходов будет достаточно.

.landing-board {
  -moz-transition: all 1s ease;
  /* all other css properties */
}
.landing-board.animated {
  -moz-transform: scale(1.1);
}

И очень мало javascript, чтобы добавить связанный класс к вашему элементу: (Здесь я использую jquery, но это можно сделать в любой другой среде или в чистом javascript)

$(window).load(function() {
  $('.landing-board').addClass('animated');
});