CSS3 Анимация, вызываемая при смене дисплея

Question

Я пытаюсь использовать анимацию CSS3, чтобы затухать элементы при загрузке страницы. При этом мне нужно установить элемент на display: none;, а затем обратно на display: block;.

Я хочу, чтобы анимация CSS3 использовалась при начальной загрузке элемента, а не через дисплей. Возможно ли это без отслеживания завершения анимации с помощью JavaScript? У меня есть пример JS скрипку здесь https://jsfiddle.net/L219ezkd/1/

Answer 1

Вы можете сохраните разметку как есть и вместо этого используйте свойство visibility. На элементе .hover-hide установите переключатель между hidden и visible.

Updated fiddle.

(Это работает, потому что элементы позиционируются абсолютно. Если бы они не были, visibility: hidden; бы не дать желаемого поведения, поскольку он поддерживает пространство, используемое элементом и просто скрывает это вместо того, чтобы полностью удалить его, как display: none;.)

Answer 2

Wrap все в контейнере и исчезают, что с помощью CSS затем показать и скрыть элементы, как вы делаете прямо сейчас:

<div class="container"> 
    <div id="hover-hide" class="fade fade-in" style="width: 100px; height: 100px; background:blue; display:block; position: absolute; top:0; left:0"> </div> 
    <div id="hover-show" style="width: 100px; height: 100px; background:red; display:none; position: absolute; top:0; left:0"></div> 
</div> 

updated fiddle