animation

在CSS3中创建连续动画（例如无限旋转）时，关键帧是否为100％（包括两端）？也就是说，是否在当前迭代的最后一帧设置了100％设置的属性？

一个例子：将发光动画使用

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

由于不连续性为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;
}

关于animation - CSS3关键帧是否包含100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4985613/

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