.shaking-block {/*:hover нужен для того, чтобы эффект работал при наведении*/
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both ;/*Вот эта строчка нужна для того, чтобы работало дрожание*/
	 animation-iteration-count:infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.shaking-block2{/*:hover нужен для того, чтобы эффект работал при наведении*/
  animation: shake 3.12s cubic-bezier(.36,.07,.19,.97) both ;/*Вот эта строчка нужна для того, чтобы работало дрожание*/
	 animation-iteration-count:infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
 
/*Вот эта часть задаёт отклонение элемента.*/
/*Допустим, наша анимация длится 1 секунду = 1 000 миллисекунд*/
@keyframes shake {
  10%, 90% {/*Здесь задано положение блока в 100 и 900 миллисекунду*/
    transform: translate3d(-1px, 0, 0);  /*Здесь первое число - это отклонение по горизонтали, а второе - отклонение по вертикали.*/
  }
   
  20%, 80% {/*Здесь задано положение блока в 200 и 800 миллисекунду*/
    transform: translate3d(2px, 0, 0); 
  }
 
  30%, 50%, 70% {/*Здесь задано положение блока в 300, 500 и 700 миллисекунду*/
    transform: translate3d(-4px, 0, 0);
  }
 
  40%, 60% {/*Здесь задано положение блока в 400 и 600 миллисекунду*/
    transform: translate3d(4px, 0, 0); 
  }
}