CSS CSS3 动画比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9196694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 animation scale
提问by Mauro74
I'm trying to animate a div so that when the page load it has scale(0,0) and animates to scale(1,1). The problem I have is that once the animation takes effect the div scales to 0 again. What I want is the div to animate to scale(1,1) and staying like that. Here's my CSS code
我正在尝试为 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;
}
What am I doing wrong?
我究竟做错了什么？
Thanks in advance
Mauro
提前致谢
毛罗
采纳答案by rgthree
You're looking for animation-fill-mode:forwardswhich applies the last keyframe of the nimation to the element when the animation is done. https://developer.mozilla.org/en/CSS/animation-fill-mode
您正在寻找animation-fill-mode:forwards哪个在动画完成时将动画的最后一个关键帧应用于元素。https://developer.mozilla.org/en/CSS/animation-fill-mode
-moz-animation-fill-mode: forwards
回答by keune
Another way of doing this: If all you want to do is animate an element to scale, you don't need to use keyframes. transitions will suffice.
另一种方法是：如果您只想为要缩放的元素设置动画，则不需要使用关键帧。过渡就足够了。
.landing-board {
-moz-transition: all 1s ease;
/* all other css properties */
}
.landing-board.animated {
-moz-transform: scale(1.1);
}
And very little javascript to add the related class to your element: (Here i'm using jquery but it could be done in any other framework or pure javascript)
很少有 javascript 可以将相关类添加到您的元素中：（这里我使用的是 jquery，但它可以在任何其他框架或纯 javascript 中完成）
$(window).load(function() {
$('.landing-board').addClass('animated');
});
