Доброго времени суток, уважаемые читатели! Взглянув на результат работы в статьях: Начинаем осваивать адаптивную верстку и Адаптивная верстка: media queries, я решил, что стоит немного украсить переходы между разрешениями шаблона. Сейчас мы наблюдаем очень резкое перестроение фотографий при изменении окна браузера: страница. Итак, что мы предпримем?
Анимация с помощью transition
Данное CSS3 свойство позволяет нам установить эффект перехода между двумя состояниями элемента. В нашем случае сделать переход между состоянием, когда фотография большая и поменьше. Делается это очень просто.
* { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
Таким образом мы добавили плавно изменение состояния блоков при изменении окна браузера. Transition мы можем задать, как для всех элементов (*), так и для отдельных блоков сайта.