CSS3动画比例

Mau*_*o74 11 css animation css3

我正在尝试动画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;
}
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?

在此先感谢
Mauro

rgt*_*ree 11

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

-moz-animation-fill-mode: forwards
Run Code Online (Sandbox Code Playgroud)