Как добавить анимацию?

Question

[Александр Коновалов]

Здравствуйте!

<div class="blockpromo">
	    	<div class="promo">
		    	<div id="light-off"><img src="assets/img/bmw_0000_Layer-2.png" class="animated zoomIn"></div>
		    	<div id="light-on" style="visibility: hidden;"><img src="assets/img/bmw_0001_Layer-2.png"></div>
	    	</div>
    	</div>

<script type="text/javascript">
function showIt() {
  document.getElementById("light-on").style.visibility = "visible";
  document.getElementById("light-off").style.visibility = "hidden";
}
setTimeout("showIt()", 1100); // after 1 sec
</script>

При открытии страницы, картинка bmw_0000_Layer-2.png появляется плавно с анимацией. После того, как выполняется скрипт, первая картинка заменяется на вторую, но уже без анимации. Как добавить анимацию ко второй картинке?

Answer 1

[Сергей Сова]

лучше использовать классы и opacity свойство
для анимации используйте transition
чтобы стояли ровно друг над другом position: absolute