Изображение анимация в css и html

Question

Я делаю сайт, где мне нужна помощь с анимацией.

У меня есть DIV, который что-то вроде этого:

<div id="header"> 
<h1>Welcome</h1> 
<img src="....Image"> 

</div> 

Изображение не должно быть показано в первом - но когда пользователь нажимает этот заголовок, он должен упасть вниз в виде анимации сверху.

Вся помощь приветствуется.

Answer 1

Неясный вопрос получает смутный ответ :) Но посмотрите на http://daneden.github.io/animate.css/, где вы можете получить хороший эффект. Я бы включил только анимацию, которую я использовал бы из файла CSS. Вы должны вызвать это с помощью JavaSript при щелчке, а затем добавить класс в текст, который запускает анимацию.

Answer 2

Попробуйте это,

CSS

#header { 
    position: relative; 
} 

#header img { 
    position: absolute; 
    left: 0; 
    top: -150px; <!-- Your Image height + some --> 
    opacity: 0; 
    -webkit-transition: all 300ms; 
    -moz-transition: all 300ms; 
    transition: all 300ms; 
} 

#header.toggled img { 
    top: 50px; 
    opacity: 1; 
} 

JS (JQuery)

$('#header').click(function(){ 
    $(this).toggleClass('toggled'); 
}); 

http://codepen.io/anon/pen/OPaqzP