CSS3 hop effects

gistfile1.css

#point {
	position:absolute;
	width:8px;
	height:8px;
	margin:-4px 0 0 -4px;
	background:-webkit-gradient(linear,left top,left bottom,from(#FFACCB),color-stop(0.5,#FF73A7),to(#FF5E99));
	border-radius:4px;
	box-shadow:0 2px 3px #333
}
#point.hop {
	-webkit-animation-name:'hop';
	-webkit-animation-duration:0.3s;
}
@-webkit-keyframes 'hop' {
	0% {
		-webkit-transform:scale(1)
	}
	25% {
		-webkit-transform:scale(0.5)
	}
	50% {
		-webkit-transform:scale(1.5)
	}
	75% {
		-webkit-transform:scale(0.75)
	}
	100% {
		-webkit-transform:scale(1)
	}
}