pure CSS shake Animation using keyframes

shake.css

@-webkit-keyframes shake {
  0% { -webkit-transform: translate(10px, 0); }
	20% { -webkit-transform: translate(-10px, 0); }
	10% { -webkit-transform: translate(8px, 0); }
	40% { -webkit-transform: translate(-8px, 0); }
	50% { -webkit-transform: translate(4px, 0); }
	60% { -webkit-transform: translate(-4px, 0); }
	70% { -webkit-transform: translate(4px, 0); }
	80% { -webkit-transform: translate(-2px, 0); }
	0% { -webkit-transform: translate(2px, 0); }
	100% { -webkit-transform: translate(0, 0); }
}

#element:hover {
	margin-left: 10px;
	line-height: 25px;
	-webkit-animation-name: shake;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-timing-function: linear;
}