Animation 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

您正在寻找

动画填充模式：forwards

，该模式在动画完成时将动画的最后一个关键帧应用于元素

---

另一种方法是：如果只需为元素设置缩放动画，则不需要使用关键帧。过渡就足够了

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

在元素中添加相关类的javascript非常少：（这里我使用jquery，但可以在任何其他框架或纯javascript中完成）

---

这似乎是一个可能的复制品的完全复制品

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

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