在CSS3动画结束时保持最终状态


301

我正在opacity: 0;CSS 中设置的某些元素上运行动画。动画类被施加的onClick,并且,使用关键帧,它改变从不透明01(除其他外)。

不幸的是,动画结束后,元素将返回到opacity: 0(在Firefox和Chrome中)。我自然的想法是,动画元素会保持最终状态,而不是覆盖其原始属性。这不是真的吗 如果没有,我如何才能做到这一点?

代码(不包括前缀版本):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

1
我将发布自己的重复通知:stackoverflow.com/questions/9196694/css3-animation-scale至少我的标题更具指导性!
2012年

Answers:


528

尝试添加animation-fill-mode: forwards;。例如这样:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

1
是的。如果可以的话,将检查您的答案。如果有任何CSS负责人想评论所需要的逻辑,我很想知道!
2012年

8
您可以在此处了解有关animation-fill-mode属性的信息-dev.w3.org/csswg/css3-animations/#animation-fill-mode-property希望有所帮助!
Christofer Vilander

6
@Dan 属性forwardsanimation-fill-mode确保动画结束后元素将保留动画的最后一个关键帧状态。例如,如果您的动画width从0变为100px,则此属性可确保元素在动画结束后仍保持100px宽。
Farzad YZ

5
不要忘记在中指定100% / to点,@keyframe否则将无法正常工作。
Tomasz Mularczyk

animation-fill-mode:
forward

26

如果您使用更多的动画属性,则速记为:

animation: bubble 2s linear 0.5s 1 normal forwards;

这给出:

  • 2s 持续时间
  • linear 计时功能
  • 0.5s 延迟
  • 1 迭代次数(可以是无穷大)
  • normal 方向
  • forwards 填充模式(如果希望具有兼容性,则将其设置为最终状态,请向后设置)

14

如果不使用短手版:确保animation-fill-mode: forwardsAFTER动画声明或将无法正常工作...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

1
你是对的。更新了我的答案。谢谢,这让我忘了哈哈。
泰勒·利奇

4

使用 animation-fill-mode:前进;

animation-fill-mode: forwards;

元素将保留由最后一个关键帧设置的样式值(取决于动画方向和动画迭代次数)。

注意:Internet Explorer 9和更早版本不支持@keyframes规则。

工作实例

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.