Question

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

一个例子：使用

进行发光动画

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

由于两个连续帧的不透明度为1而导致轻微（并且可能不易察觉）延迟？

Answer 1

CSS3动画的当前状态是，它们中的许多都有一个小但可感知的口吃，特别是如果它们重复得太快。要减轻这种影响，请使用更多关键帧（

）来延长动画时间

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

等

Answer 2

但主要是，你的问题是由于默认情况下的缓动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;
}

CSS3关键帧是否包含100％？

2 个答案: