Плавность и анимация в CSS

Здравствуйте, уважаемые читатели. Сегодня пост будет посвящен тем, кто изучает сайтостроение. На сегодняшний день язык оформления интернет-страниц (CSS) шагнул достаточно далеко. Что поделать, будущее уже наступило.  И с его помощью теперь можно не только располагать элементы на странице и менять их цвет, но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид.  Некоторые из них мы сейчас рассмотрим.

• Плавное изменение цвета 
• Плавное затухание
• Плавное увеличение — уменьшение
• Плавное перемещение
• Плавный поворот

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

Плавное изменение цвета

Для примера создадим HTML документ и поместим в него блок div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#block1{
 width:150px; /* Ширина */
 height:150px; /* Высота */
 background:#234543; /* Цвет */
 margin:100px auto; /* Отступы */
 border-radius:8px; /* Радиус углов */
 -o-border-radius:8px; /* для Оперы */
 -webkit-border-radius:8px; /* Хром и Сафари */
 -moz-border-radius:8px; /* Мозилла */
 -webkit-transition: background-color 1s linear;
 -o-transition: background-color 1s linear;
 -moz-transition: background-color 1s linear;
 transition: background-color 1s linear;
}
#block1:hover{background:#00CC66;} /* Цвет блока при наведении */

Плавное изменение цвета происходит за счет применения свойства transition, что в переводе означает переход или превращение. И это превращение происходит за 1 секунду, как указано в значении. Linear можно поменять на ease и переход будет чуть быстрее. Смотрим пример.

Демо

Плавное затухание

CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после псевдокласса hover, будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.

1
2
3
4
5
6

-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
 
#block1:hover{opacity:0.4;}

Демо

Плавное увеличение

Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в псевдоклассе hover ширину и высоту, отличную от оригинального размера.

Демо

Плавное перемещение

Здесь значения будем прописывать в псевдоклассе, используя свойство transform.

1
2
3
4
5
6

#block1:hover{
-webkit-transform: translate(50px,0);
-moz-transform: translate(50px,0); 
-o-transform: translate(50px,0);
transform: translate(50px,0);
}

Написанное означает, что при наведении курсора на объект происходит его смещение по оси Х влево на 50 пикселей. Примерно так же происходит плавный переход к якорю-ссылке.

Демо

Плавный поворот

1
2
3
4
5

#block1:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
}

Это означает, что объект будет повернут на 180° по часовой стрелке

Демо

Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но Internet Explorer как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.

СКАЧАТЬ