Интересное решение для изображение, где при наведение на его начинается тряска на несколько секунд, что можно выставить на логотип. Что также можно поставить в галерею на картинки или под ссылку, вообщем как понимаете у этого эффекта большие возможности в плане его реализаций на интернет ресурсе, но установка у него простая.
Это ставим ссылку под класс и потом стили в CSS, что на этом весь установочный процесс. Сама анимация тряски идет доли секунды, что можно сделать меньше или более по времени и редактировать по своему.
HTML
Код
<a href="http://zornet.ru/"><img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" class="zornet_ru_gukazunsa" border="0"></a>
CSS
Код
.zornet_ru_gukazunsa {
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}
.zornet_ru_gukazunsa:hover,.zornet_ru_gukazunsa:focus,.zornet_ru_gukazunsa:active {
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.81s;
animation-duration:0.81s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
@keyframes buzz-out {
9% {
-webkit-transform:translateX(5px) rotate(3deg);
transform:translateX(5px) rotate(3deg)
}
19% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-3deg)
}
29% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
58% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
67% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
79% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
89% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}
99% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}
Демонстрация:
