В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). Например, с помощью подключения класса (css), который описывает эффект, или установить как анимацию HTML элемента по умолчанию. Всё в ваших руках, я покажу лишь пример.
Анимация будет выглядеть как потряхивание элемента, которое вызывается поочередным поворотом контейнера то по часовой, то против часовой стрелки на небольшой угол. Если браузер поддерживает CCS3, то стили сведутся к примерно вот такому коду:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.elem { width: 200px; height: 50px; } .elem:hover { animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; } @keyframes trambling-animation { 0%, 50%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(-10deg); } 20%, 40% { transform: rotate(10deg); } } |
При наведении мышки, элемент начинает периодически «трястись». Я установил бесконечный цикл анимации с циклом 1.2 секунды. Поворот элемента выполняется всего на 10 градусов поочередно в ту или иную сторону.
Если будете тестировать, то задайте хотя бы цвет фона для элемента, а то его не будет видно :). Я думаю, вы об этом догадаетесь.
Современные браузеры все поддерживают CCS3. Приведу тем не менее вариант, учитывающий некоторые старые версии браузеров.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.elem { width: 200px; height: 50px; } .elem:hover { -webkit-animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; -moz-animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; -o-animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; } @keyframes trambling-animation { 0%, 50%, 100% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); } 10%, 30% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } 20%, 40% { transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); } } |
Такая анимация привлекает внимание к элементу. Её можно «прикрепить», например, к номеру телефона на сайте. Эффект может быть использован для выделения поля ввода, которое содержит ошибку или требует ввода данных. При этом для создания анимации мы обходимся без javascript.
Вот более полный пример.
Написать комментарий
Спасибо!