保持CSS动画结束时的最终状态

8 浏览
0 Comments

保持CSS动画结束时的最终状态

我正在对一些在CSS中设置为opacity: 0;的元素运行动画。动画类在点击时应用，使用关键帧，它将透明度从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; }
}

0

3 答案

0 Comments

问题的出现原因是：animation-fill-mode: forwards属性必须放在动画声明之后，否则它将不起作用。

解决方法是：animation-fill-mode: forwards属性应放在动画声明的后面。

在Chrome 108.0.5359.124（64位）的2023年版中，animation-fill-mode属性放在animation-name或其他属性之前或之后，甚至可以放在另一个花括号块或另一个样式表中，似乎没有关系。如果这样是有效的，那将非常奇怪，因为它将完全违反CSS规范的其他部分（这些规范定义了最终应用规则的计算）。不过，我不确定我是否正确理解了您的问题。

0
0 Comments

问题的出现原因：

CSS动画在结束时无法保持最终状态的原因是fill-mode属性的默认值为none，这意味着动画完成后元素会返回到初始状态。在这种情况下，如果想要保持最终状态，就需要修改fill-mode属性的值。

解决方法：

将fill-mode属性的值设置为forwards，这样动画完成后元素会保持在最终状态。具体的解决方法是在动画属性中添加fill-mode属性，并将其值设置为forwards。

完整文章如下：

如果你使用更多的动画属性，可以使用以下的简写方式：

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

这将得到以下效果：

- bubble：动画名称

- 2s：持续时间

- linear：时间函数

- 0.5s：延迟时间

- 1：迭代次数（可以是“infinite”表示无限次）

- normal：方向

- forwards：填充模式（如果想要兼容没有打开动画功能的浏览器，并且只回答标题而不是具体情况，可以将其设置为“backwards”，这样可以使用结束位置作为最终状态）

可用的时间函数有：

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

可用的方向有：

normal | reverse | alternate | alternate-reverse

问题的解决方法就是将fill-mode属性的值设置为forwards，这样动画完成后元素会保持在最终状态。具体的解决方法是在动画属性中添加fill-mode属性，并将其值设置为forwards。

0
0 Comments

问题的原因是CSS动画在结束后无法保持最终状态，解决方法是使用animation-fill-mode: forwards;属性。

CSS动画可以通过animation-fill-mode属性来控制动画结束后元素的状态。其中forwards值可以保持元素在动画结束后的最后一个关键帧状态。例如，如果动画将元素的width从0变为100px，使用该属性可以确保动画结束后元素保持100px的宽度。

需要注意的是，在关键帧中需要指定100% / to的位置，否则该属性将不起作用。

然而，使用这种方法可能会导致在某些浏览器（如Chrome）中，即使动画结束了，渲染器仍然会消耗图形资源，使应用程序的响应性下降。可以参考这个答案中的其他方法来解决这个问题。

0