escala de animación CSS3

Question

Estoy tratando de animar un div para que cuando la carga de la página tenga escala (0,0) y se anime a escala (1,1). El problema que tengo es que una vez que la animación toma efecto, el div escala a 0 nuevamente. Lo que quiero es el div para animar a escalar (1,1) y permanecer así. Aquí está mi código 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; 
} 

¿Qué estoy haciendo mal?

Gracias de antemano
Mauro

Answer 1

Usted está buscando animation-fill-mode:forwards que se aplica el último fotograma clave de la nimation al elemento cuando se realiza la animación. https://developer.mozilla.org/en/CSS/animation-fill-mode

-moz-animation-fill-mode: forwards 

Answer 2

Otra forma de hacer esto: Si lo único que quiere hacer es animar un elemento a escala, no es necesario utilizar fotogramas clave. las transiciones serán suficientes.

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

y muy poco javascript para añadir la clase relacionada a su elemento: (Aquí estoy usando jQuery pero se podría hacer en cualquier otro marco o Javascript puro)

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