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

编程 | 2020-12-29 | 编程黑洞网 | 0条评论 | 973 人阅读

我正在CSS中设置为opacity: 0;的某些元素上运行动画。动画类被应用到onClick上，并使用关键帧将不透明度从0更改为1（以及其他功能）。

不幸的是，动画结束后，元素返回到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; }
}

我将发布自己的重复通知：stackoverflow.com/questions/9196694/css3-animation-scale至少我的标题更具指导意义！

CSS3 Animate的可能重复项：动画运行后如何使对象不还原到其初始位置？

#1 楼

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

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

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

–丹
2012年10月20日在18:04

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

–克里斯托弗·维兰德（Christofer Vilander）
2012年10月20日在18:51

@Dan animation-fill-mode属性的forwards值可确保元素在动画结束后保留动画的最后一个关键帧状态。例如，如果您的动画将宽度从0更改为100px，则此属性可确保元素在动画结束后仍保持100px的宽度。

–法尔扎德YZ
16-2-17在15:23

不要忘记指定100％/指向@keyframe，否则它将无法正常工作。

– Tomasz Mularczyk
17年6月20日在18:33

animation-fill-mode：forwards也为我完成了窍门，但仅在规则中添加了“！important”命令后

– shayuna
18 Mar 27 '18在8:12

#2 楼

如果使用更多动画属性，则简写为：

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

这给出：

2s持续时间

linear计时功能

0.5s延迟

1迭代计数（可以为“无限”）

normal方向

forwards填充模式（如果您希望具有兼容性，则可以将结束位置用作最终状态（这是为了支持已关闭动画的浏览器）{并且仅回答标题，而不回答您的具体情况），请设置'backwards'）

#3 楼

如果不使用简短版本，请确保animation-fill-mode: forwards在动画声明之后，否则将不起作用...

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;

#4 楼

使用
动画填充模式：前进；

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>