В последнее время как то кучно пошло у меня использование 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.
Вот более полный пример.
спец. эффекты
Написать комментарий
Данная запись опубликована в 23.10.2015 22:45 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 21, 2015 г.
Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...
Читать
Апрель 7, 2017 г.
Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...
Читать
Спасибо!