Как заставить дёргаться div?

Question

[Timofey Barinov]

Пример:

Comments

[V Sh.]

css animation

Answer 1

[justdealman]

https://daneden.github.io/animate.css/
shake

Comments

[Timofey Barinov]

Почему это не работает?
$('.help-block').addClass('shake animated').delay( 1200 ).removeClass('shake animated');

[justdealman]

Удаление классов надо в очередь добавлять

[justdealman]

https://jsfiddle.net/x3yyn1kc/

Answer 2

[Алексей Бурлака]

Пример с рабочего проекта.

@keyframes obj_noising {
  0% { transform: rotate(2deg) translate( -3px, 0 ); }
  3% { transform: rotate(1deg) translate( 0, 0 );}
  6% { transform: rotate(-1deg) translate( -3px, 0 ); }
  9% { transform: rotate(-2deg) translate( 3px, 0 ); }
  12% { transform: rotate(0deg) translate( -3px, 0 ); }
  15% { transform: rotate(1deg) translate( 0, 0 ); }
  18% { transform: rotate(-1deg) translate( -5px, 0 ); }
  21% { transform: rotate(0deg) translate( 0, 0 ); }
  24% { transform: rotate(2deg) translate( -1px, 0 ); }
  27% { transform: rotate(-1deg) translate( 3px, 0 ); }
  30% { transform: rotate(0deg) translate( 0, 0 ); }
  
  64% { transform: rotate(2deg) translate( -1px, 0 ); }
  67% { transform: rotate(-1deg) translate( 3px, 0 ); }
  70% { transform: rotate(0deg) translate( 0, 0 ); }
}

@-webkit-keyframes obj_noising {
  0% { -webkit-transform: rotate(2deg) translate( -3px, 0 ); }
  3% { -webkit-transform: rotate(1deg) translate( 0, 0 );}
  6% { -webkit-transform: rotate(-1deg) translate( -3px, 0 ); }
  9% { -webkit-transform: rotate(-2deg) translate( 3px, 0 ); }
  12% { -webkit-transform: rotate(0deg) translate( -3px, 0 ); }
  15% { -webkit-transform: rotate(1deg) translate( 0, 0 ); }
  18% { -webkit-transform: rotate(-1deg) translate( -5px, 0 ); }
  21% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
  24% { -webkit-transform: rotate(2deg) translate( -1px, 0 ); }
  27% { -webkit-transform: rotate(-1deg) translate( 3px, 0 ); }
  30% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
  
  64% { -webkit-transform: rotate(2deg) translate( -1px, 0 ); }
  67% { -webkit-transform: rotate(-1deg) translate( 3px, 0 ); }
  70% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
}
@-moz-keyframes obj_noising {
  0% { -moz-transform: rotate(2deg) translate( -3px, 0 ); }
  3% { -moz-transform: rotate(1deg) translate( 0, 0 );}
  6% { -moz-transform: rotate(-1deg) translate( -3px, 0 ); }
  9% { -moz-transform: rotate(-2deg) translate( 3px, 0 ); }
  12% { -moz-transform: rotate(0deg) translate( -3px, 0 ); }
  15% { -moz-transform: rotate(1deg) translate( 0, 0 ); }
  18% { -moz-transform: rotate(-1deg) translate( -5px, 0 ); }
  21% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
  24% { -moz-transform: rotate(2deg) translate( -1px, 0 ); }
  27% { -moz-transform: rotate(-1deg) translate( 3px, 0 ); }
  30% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
  
  64% { -moz-transform: rotate(2deg) translate( -1px, 0 ); }
  67% { -moz-transform: rotate(-1deg) translate( 3px, 0 ); }
  70% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
}
@-o-keyframes obj_noising {
  0% { -o-transform: rotate(2deg) translate( -3px, 0 ); }
  3% { -o-transform: rotate(1deg) translate( 0, 0 );}
  6% { -o-transform: rotate(-1deg) translate( -3px, 0 ); }
  9% { -o-transform: rotate(-2deg) translate( 3px, 0 ); }
  12% { -o-transform: rotate(0deg) translate( -3px, 0 ); }
  15% { -o-transform: rotate(1deg) translate( 0, 0 ); }
  18% { -o-transform: rotate(-1deg) translate( -5px, 0 ); }
  21% { -o-transform: rotate(0deg) translate( 0, 0 ); }
  24% { -o-transform: rotate(2deg) translate( -1px, 0 ); }
  27% { -o-transform: rotate(-1deg) translate( 3px, 0 ); }
  30% { -o-transform: rotate(0deg) translate( 0, 0 ); }
  
  64% { -o-transform: rotate(2deg) translate( -1px, 0 ); }
  67% { -o-transform: rotate(-1deg) translate( 3px, 0 ); }
  70% { -o-transform: rotate(0deg) translate( 0, 0 ); }
}


.f_noising {  
	-webkit-animation:	obj_noising 1.0s infinite; /* Safari 4+ */
	-moz-animation:	obj_noising 1.0s infinite; /* Fx 5+ */
	-o-animation:	obj_noising 1.0s infinite; /* Opera 12+ */
	animation:	obj_noising 1.0s infinite; /* IE 10+, Fx 29+ */
	display: inline-block;
}