Адаптивная верстка: анимация

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

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 09.02.2014
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft
[subscribe2]