CSS3动画缩放

Question

我正在尝试对一个div进行动画处理，使得在页面加载时它具有scale(0,0)的大小并且动画效果为scale(1,1)。我的问题是一旦动画生效，div就会再次缩小为0。我想要的是div动画到scale(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;
}

我做错了什么？

- Mauro74

Answer 1

你需要使用 animation-fill-mode:forwards，它会在动画结束时将元素设置为最后一个关键帧的状态。了解更多请参考https://developer.mozilla.org/en/CSS/animation-fill-mode。

-moz-animation-fill-mode: forwards

- rgthree

Answer 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');
});

- keune