animation - CSS3 关键帧是否包含 100%？

Question

在CSS3中创建连续动画时，比如无限旋转，关键帧是否在100%包含？也就是说，是否在当前迭代的最后一帧设置了 100% 的属性？

一个例子:发光动画会使用

@-webkit-keyframes glow {
    0%   { opacity: 1; }
    50%  { opacity: 0.7; }
    100% { opacity: 1; }
}

由于不透明度为 1 的两个连续帧导致轻微(并且可能难以察觉)延迟？

Answer 1

但大多数情况下，您的问题是由于缓动，默认情况下是 ease-in-out，这意味着它将更多地关注动画的 0% 和 100% 的样式。所以它主要非常接近 opacity:1。

对于这种动画，您也可以使用替代动画，因此您将只有 2 个关键帧。

@-webkit-keyframes glow {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

.glow {
    -webkit-animation-name: glow;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}