CSS3动画缩放[复制]

pu82cl6c 于 2022-11-27 发布在 CSS3

关注(0)|答案(2)|浏览(194)

此问题在此处已有答案：

Maintaining the final state at end of a CSS3 animation（5个答案）
3天前关闭。
我尝试将一个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;
}

我做错了什么？

css

来源：https://stackoverflow.com/questions/9196694/css3-animation-scale

2条答案

按热度按时间

vmjh9lq91#

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

-moz-animation-fill-mode: forwards

赞(0）回复(0）举报 2022-11-27

vlurs2pr2#

另一种方法是：如果您只想设置元素的缩放动画，则不需要使用关键帧。变换就足够了。

.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');
});

赞(0）回复(0）举报 2022-11-27

我来回答

CSS3动画缩放[复制]

2条答案

相关问题

热门标签

最新问答