CSS3动画缩放 [英] CSS3 animation scale

问题描述

我试图动画的div，以便当页面加载时它有缩放（0,0）和动画缩放（1,1）。我的问题是，一旦动画生效，div再次缩放到0。我想要的是动画缩放（1,1）和保持这样的div。这是我的CSS代码

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;
}

我做错了什么？

提前感谢

Mauro

Thanks in advance
Mauro

推荐答案

你正在寻找 animation-fill-mode：forward ，它会在动画完成时将nimation的最后一个关键帧应用到元素。 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屋！