Является ли ключевой кадр 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;
}

Answer 2

Текущее состояние CSS3-анимации таково, что многие из них имеют небольшое, но ощутимое заикание, особенно если они повторяются слишком быстро.Чтобы смягчить это, увеличьте анимацию с помощью дополнительных ключевых кадров, таких как

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

и т. Д.