Анимация с помощью CSS
galina2601 26-03-2014, 22:13 3 912 Уроки по 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);
}