Когда появляются новые свойства в каскадной таблице CSS, то чаще всего на основе их возможностей энтузиасты создают библиотеки, включающие в себя целые наборы эффектов. Так было с CSS фильтрами изображений, CSS анимация и с другими представителями интересных способностей.
А сегодня рассмотрим CSS «плагин» CSShake, с помощью которого можно сделать забавный анимированный эффект тряски элементов. Основным компонентом является свойство трансформация (transform), работающий в сочетании с animation.
Пример эффекта под бит)
Это лишь прикол, а не конечный результат. На самом деле там есть выбор эффектов как небольшой тряски, так и очень большой или вовсе настройка вручную. Также выбор направления: горизонтальное, вертикальное, круговое и т.д. Подробнее читаем дальше)
Подключение CSShake и использование на сайте
Все, очень довольно просто тем более учитывая, что плагин CSShake реализован только средствами CSS. Стало быть, для работы нужны стили, и указать определенные классы элементам, которых нужно не по-детски потрясти)
Подключение
Грубо говоря, библиотека подключается тремя способами, но прежде всего уточню, что необязательно интегрировать полный набор эффектов в случае, если вам нужен только один из них. Так как специально на такой случай сделана разбивка всех эффектов на отдельные CSS файлы.
1-й. Скачать с официального сайта (здесь) последнюю версию плагина. Загрузить его к себе на сайт и между тегами <head> </head> подключить к ресурсу.
<link rel="stylesheet" type="text/css" href="csshake.min.css">
2-й. Использовать сеть доставки (CDN), что намного упрощает работу.
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
3-й. Третий вариант, собственно и является отдельными файлами стилей. Их можно подключать через CDN (здесь весь список) или просто скопировать весь код и вставить в свой файл стилей сайта.
Использование
После подключения библиотеки CSShake, любым из трех вариантов выше, нужно к желаемому элементу сайта задать определенные классы. Присутствуют три основных класса:
1-й. shake-horizontal – любой эффект тряски
2-й. shake-constant – запуск без прерывной анимации
3-й. shake-constant--hover – остановка анимации при наведении на элемент
Примеры трансформации плагина CSShake
Заготовки.
<div class="shake-rotate">shake-hard</div><!-- Жесткая тряска --> <div class="shake-slow">shake-slow</div><!-- Медленная тряска --> <div class="shake-little">shake-little</div><!-- Легкая тряска --> <div class="shake-horizontal">shake-horizontal</div><!-- Горизонтальная тряска --> <div class="shake-vertical">shake-vertical</div><!-- Вертикальная тряска --> <div class="shake-rotate">shake-rotate</div><!-- Вращающаяся тряска --> <div class="shake-opacity">shake-opacity</div><!-- Полупрозрачная тряска --> <div class="shake-crazy">shake-crazy</div><!-- Безумная тряска --> <div class="shake-chunk">shake-chunk</div><!-- Периодическая тряска -->
Легкая тряска
shake-little
<div class="shake-little shake-constant shake-constant--hover">shake-little</div>
.shake-little{display:inline-block;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-freeze:hover,.shake-trigger:hover .shake-freeze,.shake-little:hover,.shake-trigger:hover .shake-little{animation-play-state:running}@keyframes shake-little{2%{transform:translate(1px, 0px) rotate(0.5deg)}4%{transform:translate(0px, 0px) rotate(0.5deg)}6%{transform:translate(0px, 1px) rotate(0.5deg)}8%{transform:translate(1px, 0px) rotate(0.5deg)}10%{transform:translate(0px, 1px) rotate(0.5deg)}12%{transform:translate(0px, 0px) rotate(0.5deg)}14%{transform:translate(0px, 1px) rotate(0.5deg)}16%{transform:translate(0px, 0px) rotate(0.5deg)}18%{transform:translate(0px, 1px) rotate(0.5deg)}20%{transform:translate(0px, 1px) rotate(0.5deg)}22%{transform:translate(0px, 1px) rotate(0.5deg)}24%{transform:translate(0px, 0px) rotate(0.5deg)}26%{transform:translate(1px, 0px) rotate(0.5deg)}28%{transform:translate(0px, 1px) rotate(0.5deg)}30%{transform:translate(1px, 0px) rotate(0.5deg)}32%{transform:translate(1px, 0px) rotate(0.5deg)}34%{transform:translate(1px, 1px) rotate(0.5deg)}36%{transform:translate(0px, 0px) rotate(0.5deg)}38%{transform:translate(1px, 1px) rotate(0.5deg)}40%{transform:translate(1px, 1px) rotate(0.5deg)}42%{transform:translate(0px, 0px) rotate(0.5deg)}44%{transform:translate(1px, 1px) rotate(0.5deg)}46%{transform:translate(1px, 1px) rotate(0.5deg)}48%{transform:translate(1px, 0px) rotate(0.5deg)}50%{transform:translate(1px, 0px) rotate(0.5deg)}52%{transform:translate(0px, 0px) rotate(0.5deg)}54%{transform:translate(1px, 0px) rotate(0.5deg)}56%{transform:translate(1px, 0px) rotate(0.5deg)}58%{transform:translate(1px, 1px) rotate(0.5deg)}60%{transform:translate(1px, 1px) rotate(0.5deg)}62%{transform:translate(0px, 1px) rotate(0.5deg)}64%{transform:translate(1px, 0px) rotate(0.5deg)}66%{transform:translate(0px, 1px) rotate(0.5deg)}68%{transform:translate(0px, 1px) rotate(0.5deg)}70%{transform:translate(1px, 1px) rotate(0.5deg)}72%{transform:translate(1px, 0px) rotate(0.5deg)}74%{transform:translate(1px, 0px) rotate(0.5deg)}76%{transform:translate(1px, 1px) rotate(0.5deg)}78%{transform:translate(1px, 1px) rotate(0.5deg)}80%{transform:translate(1px, 1px) rotate(0.5deg)}82%{transform:translate(0px, 0px) rotate(0.5deg)}84%{transform:translate(0px, 0px) rotate(0.5deg)}86%{transform:translate(1px, 1px) rotate(0.5deg)}88%{transform:translate(1px, 1px) rotate(0.5deg)}90%{transform:translate(0px, 0px) rotate(0.5deg)}92%{transform:translate(1px, 0px) rotate(0.5deg)}94%{transform:translate(0px, 1px) rotate(0.5deg)}96%{transform:translate(1px, 0px) rotate(0.5deg)}98%{transform:translate(1px, 1px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation:shake-little 100ms ease-in-out infinite}
Вращающаяся тряска
shake-rotate
<div class="shake-rotate shake-constant shake-constant--hover">shake-rotate</div>
.shake-rotate{display:inline-block;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-freeze:hover,.shake-trigger:hover .shake-freeze,.shake-rotate:hover,.shake-trigger:hover .shake-rotate{animation-play-state:running}@keyframes shake-rotate{2%{transform:translate(0, 0) rotate(0.5deg)}4%{transform:translate(0, 0) rotate(-4.5deg)}6%{transform:translate(0, 0) rotate(7.5deg)}8%{transform:translate(0, 0) rotate(-2.5deg)}10%{transform:translate(0, 0) rotate(0.5deg)}12%{transform:translate(0, 0) rotate(3.5deg)}14%{transform:translate(0, 0) rotate(5.5deg)}16%{transform:translate(0, 0) rotate(1.5deg)}18%{transform:translate(0, 0) rotate(4.5deg)}20%{transform:translate(0, 0) rotate(4.5deg)}22%{transform:translate(0, 0) rotate(-6.5deg)}24%{transform:translate(0, 0) rotate(5.5deg)}26%{transform:translate(0, 0) rotate(5.5deg)}28%{transform:translate(0, 0) rotate(-4.5deg)}30%{transform:translate(0, 0) rotate(6.5deg)}32%{transform:translate(0, 0) rotate(-0.5deg)}34%{transform:translate(0, 0) rotate(-2.5deg)}36%{transform:translate(0, 0) rotate(0.5deg)}38%{transform:translate(0, 0) rotate(2.5deg)}40%{transform:translate(0, 0) rotate(-3.5deg)}42%{transform:translate(0, 0) rotate(6.5deg)}44%{transform:translate(0, 0) rotate(1.5deg)}46%{transform:translate(0, 0) rotate(2.5deg)}48%{transform:translate(0, 0) rotate(-5.5deg)}50%{transform:translate(0, 0) rotate(-4.5deg)}52%{transform:translate(0, 0) rotate(0.5deg)}54%{transform:translate(0, 0) rotate(6.5deg)}56%{transform:translate(0, 0) rotate(6.5deg)}58%{transform:translate(0, 0) rotate(3.5deg)}60%{transform:translate(0, 0) rotate(-1.5deg)}62%{transform:translate(0, 0) rotate(-2.5deg)}64%{transform:translate(0, 0) rotate(1.5deg)}66%{transform:translate(0, 0) rotate(-1.5deg)}68%{transform:translate(0, 0) rotate(-3.5deg)}70%{transform:translate(0, 0) rotate(3.5deg)}72%{transform:translate(0, 0) rotate(0.5deg)}74%{transform:translate(0, 0) rotate(4.5deg)}76%{transform:translate(0, 0) rotate(2.5deg)}78%{transform:translate(0, 0) rotate(5.5deg)}80%{transform:translate(0, 0) rotate(4.5deg)}82%{transform:translate(0, 0) rotate(-0.5deg)}84%{transform:translate(0, 0) rotate(-5.5deg)}86%{transform:translate(0, 0) rotate(-0.5deg)}88%{transform:translate(0, 0) rotate(0.5deg)}90%{transform:translate(0, 0) rotate(3.5deg)}92%{transform:translate(0, 0) rotate(-3.5deg)}94%{transform:translate(0, 0) rotate(7.5deg)}96%{transform:translate(0, 0) rotate(2.5deg)}98%{transform:translate(0, 0) rotate(3.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-rotate.shake-freeze,.shake-rotate.shake-constant{animation:shake-rotate 100ms ease-in-out infinite}
Медленная тряска
shake-slow
<div class="shake shake-slow shake-constant shake-constant--hover">shake-slow</div>
.shake-slow{display:inline-block;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-freeze:hover,.shake-trigger:hover .shake-freeze,.shake-slow:hover,.shake-trigger:hover .shake-slow{animation-play-state:running}@keyframes shake-slow{2%{transform:translate(1px, 7px) rotate(-1.5deg)}4%{transform:translate(6px, -6px) rotate(-1.5deg)}6%{transform:translate(5px, 4px) rotate(0.5deg)}8%{transform:translate(10px, -7px) rotate(2.5deg)}10%{transform:translate(-6px, 10px) rotate(2.5deg)}12%{transform:translate(-6px, -6px) rotate(-0.5deg)}14%{transform:translate(-4px, 9px) rotate(-2.5deg)}16%{transform:translate(-4px, 4px) rotate(1.5deg)}18%{transform:translate(-2px, -3px) rotate(-2.5deg)}20%{transform:translate(3px, 9px) rotate(2.5deg)}22%{transform:translate(1px, -4px) rotate(0.5deg)}24%{transform:translate(9px, 3px) rotate(3.5deg)}26%{transform:translate(-3px, 3px) rotate(-1.5deg)}28%{transform:translate(10px, -7px) rotate(3.5deg)}30%{transform:translate(-6px, -1px) rotate(3.5deg)}32%{transform:translate(-5px, 8px) rotate(-2.5deg)}34%{transform:translate(2px, -2px) rotate(3.5deg)}36%{transform:translate(0px, 3px) rotate(-0.5deg)}38%{transform:translate(-9px, -7px) rotate(-0.5deg)}40%{transform:translate(1px, -1px) rotate(0.5deg)}42%{transform:translate(-9px, 8px) rotate(0.5deg)}44%{transform:translate(1px, -2px) rotate(-0.5deg)}46%{transform:translate(-4px, -8px) rotate(1.5deg)}48%{transform:translate(-7px, 0px) rotate(0.5deg)}50%{transform:translate(6px, -7px) rotate(-2.5deg)}52%{transform:translate(-1px, -2px) rotate(-2.5deg)}54%{transform:translate(8px, 0px) rotate(2.5deg)}56%{transform:translate(-5px, -3px) rotate(2.5deg)}58%{transform:translate(5px, 2px) rotate(-2.5deg)}60%{transform:translate(5px, -3px) rotate(-1.5deg)}62%{transform:translate(1px, -8px) rotate(-1.5deg)}64%{transform:translate(7px, -7px) rotate(0.5deg)}66%{transform:translate(5px, -8px) rotate(1.5deg)}68%{transform:translate(-9px, -6px) rotate(3.5deg)}70%{transform:translate(-2px, -1px) rotate(-2.5deg)}72%{transform:translate(-4px, 3px) rotate(-2.5deg)}74%{transform:translate(8px, -7px) rotate(1.5deg)}76%{transform:translate(-2px, 7px) rotate(-1.5deg)}78%{transform:translate(3px, 7px) rotate(-1.5deg)}80%{transform:translate(1px, -3px) rotate(1.5deg)}82%{transform:translate(-6px, -4px) rotate(0.5deg)}84%{transform:translate(6px, 6px) rotate(-1.5deg)}86%{transform:translate(0px, -2px) rotate(-1.5deg)}88%{transform:translate(9px, -3px) rotate(-0.5deg)}90%{transform:translate(1px, 0px) rotate(1.5deg)}92%{transform:translate(0px, -6px) rotate(-1.5deg)}94%{transform:translate(-1px, -2px) rotate(2.5deg)}96%{transform:translate(5px, 1px) rotate(-2.5deg)}98%{transform:translate(4px, 0px) rotate(-0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-slow.shake-freeze,.shake-slow.shake-constant{animation:shake-slow 5s ease-in-out infinite}
Страничка плагина CSShake