Echelle d'animation CSS3

Je suis en train d'animer un div de sorte que lorsque le chargement de la page, il a échelle(0,0) et anime à l'échelle(1,1). Le problème que j'ai c'est que une fois, l'animation prend effet le div échelles de 0 à nouveau. Ce que je veux, c'est la div pour animer à l'échelle(1,1) et de rester comme ça. Voici mon code 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;
}

Ce que je fais mal?

Merci d'avance
Mauro

source d'informationauteur Mauro74 | 2012-02-08

  1. 11

    Vous êtes à la recherche pour animation-fill-mode:forwards qui s'applique à la dernière image clé de la nimation de l'élément lors de l'animation est réalisée. https://developer.mozilla.org/en/CSS/animation-fill-mode

    -moz-animation-fill-mode: forwards
  2. 1

    Une autre façon de faire: Si tout ce que vous voulez faire est d'animer un élément à l'échelle, vous n'avez pas besoin d'utiliser les images clés. les transitions suffira.

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

    Et très peu de code javascript pour ajouter la classe correspondant à votre élément: (Ici je suis à l'aide de jquery, mais il peut être fait dans n'importe quel autre framework ou javascript)

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