26.03.2014

Анимация с помощью CSS

Мы все уже как-то незаметно привыкли к тому, что элементы хорошего сайта должны быть несколько интерактивны. Начиная от простого подсвечивания пунктов меню, до всплывающих окошек с подсказками и пояснениями при наведении курсора мышки.

Однако всегда считалось, что элементы анимации создаются с помощью технологии Flash или программированием на java-script, action-script и тому подобное.

Но!

Оказывается, что стильные меню и даже слайд-шоу можно создавать просто используя CSS.

Вот, к примеру, четыре квадратика - это просто div-ы одного размера, но с разноцветными границами.

Подведите курсор к каждому из них - и вы увидите несложную анимацию. Это не программирование, а использование стилей. 

Поворот на 360о
Сдвиг вправо и вверх
Увеличение в 2 раза
Увеличение в 2 раза по горизонтали

Псевдокласс hover позволяет изменять свойство объектов при наведении на них курсора мышки.

 Начнем с самого простого.

Зададим свойства для какого-то текста, выделим его с помощью тега <div>

<div id="text">Это наш текст</div>

и зададим стилевые свойства для текста: 

#text{
color:red;
background-color:yellow;
font-size:13pt; 
}

#text:hover{
color:yellow;
background-color:red;
font-size:13pt;
}


Это наш текст

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

Для того, чтобы изменения происходили плавно и замедленно, нужно использовать специальное свойство transition.

#text:{
transition: all 1s ease-in-out;

}


Это наш текст

У свойства transition есть несколько атрибутов.

Вначале у меня написано all, что означает, применить ко всем стилям, то есть у меня медленно будут меняться и фон, и цвет букв. Можно вместо all указать конкретное свойство, скажем color или border...

Следующим  у меня идет 1s. Здесь все просто - это время в течении которого происходит трансформация.

Комбинация ease-in-out означает способ трансформации - плавно или по шагам она будет идти, с ускорением или без, ускорение в начале или в конце.

Возможные значения: ease, linear, ease-in, ease-out, ease-in-out, step-start,step-end.

Что означает каждый атрибут, можете посмотреть сами.


Так как свойство transition корректно работает только в последних версиях браузеров, необходимо предусмотреть и это и записать так:

#text:{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

}

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

Сдвиг - transform: translate(4em,-3em);.
Положительные цифры - сдвиг вправо и вниз, отрицательные - влево и вверх.

Поворот на заданное количество градусов - transform: rotate(180deg);

Увеличение в задвнное количество раз - transform: scale(2);

#text{
width:200px;height:30px;
border:2px solid #f00;background-color: yellow;
color:red;
font-size:13pt;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#text:hover{
width:150px ; height:150px;
border:2px solid yellow;background-color: red;color:yellow;
-webkit-transform: translate(4em,-3em) rotate(360deg) scale(2);
-moz-transform: translate(4em,-3em) rotate(360deg) scale(2);
-o-transform: translate(4em,-3em) rotate(360deg) scale(2);
-ms-transform: translate(4em,-3em) rotate(360deg) scale(2);
transform: translate(4em,-3em) rotate(360deg) scale(2);
}

Это наш текст