Доброго времени суток, уважаемые читатели! Взглянув на результат работы в статьях: Начинаем осваивать адаптивную верстку и Адаптивная верстка: 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 мы можем задать, как для всех элементов (*), так и для отдельных блоков сайта.
