Как работает CSS анимация на скрытых элементах?

Question

[sarsokol]

Почитал про CSS анимации (свойство animation), но эта информация не попалась.

Т.е. у элемента стоит анимация, ее задержки и т.д.
Если элемент видимый или сдвинут за пределы экрана, то все проигрывается, но если на элементе стоит display: none, то запуск анимации не происходит и соотв. переключив его на block мы видим анимацию с самого начала.

Это поведение браузеров или спецификация самого свойства?

Answer 1

[Антон Антон]

Все работает в соответствии спецификацией

Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.

https://www.w3.org/TR/css-animations-1/#animations