У меня есть набор ящиков, в каждом из которых есть анимация:

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0); }
    100% { transform: scale(1); }
}

Чтобы создать эффект развевающегося флага, я использую свойство CSS animation-delay:

.pulsate1 {
    -webkit-animation-delay: 2s;
}
.pulsate2 {
    -webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */

Эти классы pulsateN обернуты вокруг каждого ряда ящиков.

При использовании этого метода иногда наблюдается мерцание, как показано в этой скрипке. Есть другое лучшее решение?

css
0
Kristoffer Jälén 20 Апр 2016 в 23:08

2 ответа

Лучший ответ

Мерцание происходит из-за того, что CSS не знает, что делать с масштабом 0. Измените его на что-то низкое, например, 0,001, и наслаждайтесь плавно развевающийся флаг :)

@keyframes pulse {
    0% { transform:  scale(1) translateZ(0); }
    50% { transform: scale(0.001) translateZ(0) }
    100% { transform: scale(1) translateZ(0) }
}

(Как упоминалось в Skyline, вы можете добавить translateZ(0), чтобы воспользоваться преимуществами графического процессора)

1
jotik 25 Апр 2016 в 14:38

scale() - это стиль 2D-преобразования. Попробуйте добавить в анимацию translateZ (0) или translate3d (0,0,0). Это заставит браузер думать, что он выполняет 3D-преобразования, и переложит работу на графический процессор, если он доступен. Я не вижу мерцания в Chrome 49.

@keyframes pulse {
    0% { transform: scale(1) translateZ(0); }
    50% { transform: scale(0) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

Вот статья, объясняющая преимущества в производительности translate3d: https: // aerotwist. ru / blog / on-translate3d-and-layer-creation-hacks /

1
skyline3000 20 Апр 2016 в 20:34