CSS3动画比例答案

【问题标题】：CSS3 animation scaleCSS3动画比例
【发布时间】：2012-03-01 02:05:47
【问题描述】：

我正在尝试为 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;
}

我做错了什么？

提前致谢
毛罗

【问题讨论】：

它似乎与 stackoverflow.com/questions/6897724/… 完全相同
Maintaining the final state at end of a CSS3 animation的可能重复

标签： animation css

【解决方案1】：

您正在寻找animation-fill-mode:forwards，它会在动画完成时将动画的最后一个关键帧应用于元素。 https://developer.mozilla.org/en/CSS/animation-fill-mode

-moz-animation-fill-mode: forwards

【讨论】：

【解决方案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');
});

【讨论】：