Как этот сайт делает анимацию загрузки страницы?

Question

http://visualidiot.com/articles/hacking-facebook

В любой статье этого сайта вы увидите, что в основной части страницы есть анимация, где она скользит вниз, а затем немного вверх. Основная часть страницы анимируется, а заголовка нет. Когда я раньше видел анимацию загрузки страницы, у них были проблемы с ошибками, беспорядок, когда вы нажимали кнопку «Назад» и возвращались на страницу.

Как именно этот парень делает эту анимацию?

Answer 1

Я Визуальный Идиот, парень, который сделал, ну, мой сайт.

В принципе, Сет сказал, что все в animations.css, и, более конкретно, она использует ключевые кадры анимации, чтобы получить вещи сделано:

@-webkit-keyframes bounce { 
    0% { opacity: 0; -webkit-transform: translateY(-800px); } 
    60% { opacity: 1; -webkit-transform: translateY(25px); } 
    80% { -webkit-transform: translateY(-8px); opacity: .8; } 
    100% { -webkit-transform: translateY(0); opacity: 1; } 
} 

Это определяет анимацию, которая затем может быть использована как так:

.bounce { 
    -webkit-animation: bounce .75s ease-in-out; 
} 

Теперь, когда что-то есть класс «отскакивать» добавил к нему, он будет делать это мило мало эффекта страниц есть на моем сайте. Однако стоит отметить, что, если вы добавите класс через Javascript (только на более длинных страницах), он будет работать лучше, поскольку он иногда запускает анимацию до готовности DOM,

Если вы хотите узнать больше о анимации ключевых кадров в CSS, я предлагаю вам ознакомиться с удивительным animate.css library. Я многому научился, вытаскивая исходные файлы.