CSS тряска
@keyframes trambling-animation{ 0%,50%,100%{ transform:rotate(0deg); } 10%,30%{ transform:rotate(-10deg); } 20%,40%{ transform:rotate(10deg); } } .trambling{ animation:1.2s ease-in-out 0s normal none infinite running trambling-animation; }
LESS с поддержкой старых браузеров
.transform(@transform){ -moz-transform:@transform; -ms-transform:@transform; -webkit-transform:@transform; -o-transform:@transform; transform:@transform; } .animation(@animation){ -webkit-animation:@animation; -moz-animation:@animation; -o-animation:@animation; animation:@animation; } @keyframes trambling-animation{ 0%,50%,100%{ .transform(rotate(0deg)); } 10%,30%{ .transform(rotate(-10deg)); } 20%,40%{ .transform(rotate(10deg)); } } .trambling{ .animation(1.2s ease-in-out 0s normal none infinite running trambling-animation); }
Или используйте jquery плагин jRumble:
https://jackrugile.com/jrumble/