css3动态效果 抖动

css3动态效果抖动

程维达

@-webkit-keyframes shakes {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}

	10%,
	20% {
		-webkit-transform: scale(0.9) rotate(-3deg);
		-ms-transform: scale(0.9) rotate(-3deg);
		transform: scale(0.9) rotate(-3deg)
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale(1.1) rotate(3deg);
		-ms-transform: scale(1.1) rotate(3deg);
		transform: scale(1.1) rotate(3deg)
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale(1.1) rotate(-3deg);
		-ms-transform: scale(1.1) rotate(-3deg);
		transform: scale(1.1) rotate(-3deg)
	}

	100% {
		-webkit-transform: scale(1) rotate(0);
		-ms-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0)
	}
}

<script type="text/javascript">
setInterval(function() {
		$('.numberdddd').addClass("shakes");
			if ($(".numberdddd").hasClass("shakes")) {
			setTimeout(function() {
					$('.numberdddd').removeClass("shakes");
				}, 2000);
 			}
		}, 3000);
 </script>

.shakes {
    -webkit-animation: shakes 1s 1s ease-out infinite both;
    -moz-animation: shakes 1s 1s ease-out infinite both;
    -o-animation: shakes 1s 1s ease-out infinite both;
    animation: shakes 1s 1s ease-out infinite both;
}