Добавить анимацию для изменения CSS на свитке

Question

Я построил следующую страницу:

http://jsfiddle.net/czLo0t6n/

Code visible at jsfiddle 

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

Или, может быть, вы можете порекомендовать мне лучший сценарий, чем тот, который я использовал?

Надежда кто-то может помочь :-)

Лучшие

Th

Answer 1

Вы должны включить переходы на элементы, которые изменяются, когда классы .large/.small переключаются

#header header, 
#logo, 
#slogan{ 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    -ms-transition: all 0.4s; 
    -o-transition: all 0.4s; 
    transition:all 0.4s; 
} 

Demo на http://jsfiddle.net/czLo0t6n/2/