CSS3动画比例 [英] CSS3 animation scale
问题描述
我想动画一个div,这样,当页面加载它有刻度(0,0)和动画缩放(1,1)。我的问题是,一旦发生动画股利尺度再次影响到0。我要的是动画规模(1,1),住这样的股利。这里是我的CSS code
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
@-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
推荐答案
您正在寻找动画填充模式:转发
适用的nimation的最后一个关键帧于元件时,动画完成。 <一href=\"https://developer.mozilla.org/en/CSS/animation-fill-mode\">https://developer.mozilla.org/en/CSS/animation-fill-mode
You're looking for animation-fill-mode:forwards
which applies the last keyframe of the nimation to the element when the animation is done. https://developer.mozilla.org/en/CSS/animation-fill-mode
-moz-animation-fill-mode: forwards
这篇关于CSS3动画比例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!