css3动画结束时闪烁 |淘宝css分类

/* CSS3 动画结束时出现闪烁的原因 */
animation-fill-mode: forwards;

上面这段代码是造成 CSS3 动画结束时出现闪烁的罪魁祸首。animation-fill-mode 属性用于定义在动画执行之前和之后元素的样式状态。将其设置为 forwards，意味着当动画结束时元素将保持最后一帧的状态。

然而，在某些情况下，最后一帧状态可能会被浏览器解释为动画完成之前的一帧，导致元素闪烁一下，然后才呈现其最后一帧的状态。

要解决这个问题，可以将 animation-fill-mode 设置为 none 或 backwards，这样动画结束时元素将返回到起始状态或者没有效果。

/* 解决 CSS3 动画结束时出现闪烁的方法 */
animation: myanimation 2s forwards;
animation-fill-mode: none;

上面这段代码演示了如何将 animation-fill-mode 设置为 none 并将动画属性分开定义的例子。

总之，为了避免 CSS3 动画在结束时出现不必要的闪烁效果，大家应该避免将 animation-fill-mode 设置为 forwards，或者将其和动画属性分开定义，以便更好地控制动画效果。