Is the CSS3 keyframe at 100% inclusive?

When creating continuous animations in CSS3, such as an infinite rotation, 开发者_JAVA百科is the keyframe at 100% inclusive? That is, are the properties given at 100% set at the last frame of the current iteration?

An example: would a glow animation using

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

cause a slight (and possibly imperceptible) lag due to two consecutive frames with an opacity of 1?

But mostly, your problem here is due to the easing which is by default ease-in-out, meaning it will focus more on the style of 0% and 100% of your animation. So it will be mainly very close to opacity:1.

For this kind of animation you can also use alternate, so you'll have only 2 keyframes.

@-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;
}

The current state of CSS3 animation is that many of them have a small but perceptible stutter particularly if they repeat too quickly. To mitigate this, make your animation longer with more keyframes aka

0%     { opacity 1; }
5%     { opacity .7; }
10%    { opacity 1; }
15%    { opacity .7; }
20%    { opacity 1; }

etc.