Skala animacji CSS3

Question

Próbuję animować element div, aby przy ładowaniu strony miał skalę (0,0) i animował na skali (1,1). Problem polega na tym, że gdy animacja zacznie działać, podziałka div znów będzie równała się 0. To, czego chcę, to div animować do skali (1,1) i pozostać w ten sposób. Oto mój kod 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; 
} 

Co robię źle?

góry dzięki
Mauro

Answer 1

Szukacie animation-fill-mode:forwards których stosuje ostatnią klatkę z nimation do elementu, gdy animacja jest wykonywana. https://developer.mozilla.org/en/CSS/animation-fill-mode

-moz-animation-fill-mode: forwards 

Answer 2

Innym sposobem w ten sposób: Jeśli wszystko, co chcesz zrobić, to animować element w skali, nie trzeba używać klatek kluczowych. przejścia będą wystarczające.

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

i bardzo mało javascript, aby dodać klasę do powiązanego elementu: (Tutaj używam jQuery ale można to zrobić w inny ram lub czystego javascript)

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