offsetが使えない

@keyframesで上下に動いてるやつをhoverしたら
その場で横に震えるっていうのが書きたくて
offsetをずっと調べてたけどなんや

console.logで何回確認しても数値が変化しない

仕方がないので他の方法探してできたのがこれ

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>
<body>
<div class="box jump"><div class="swing"></div></div>


<style>
body{margin: 0;padding: 0;}
.box{
	width: 50px;
	height: 50px;
	background: #000;
	position: absolute;
	left: 20px;
	margin-left: 0px;
}

@-webkit-keyframes jump{
	0%{top: 200px;}
	100%{top: 50px;}	
}

.jump{
	-webkit-animation: jump linear 0.8s;
    -webkit-transform-origin: center -20px 0;
    -webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state: running;
}

.jump:hover{-webkit-animation-play-state:paused;}

.swing{ 
        width: 50px;
		height: 50px;
		background: #000;
		position: absolute;
		margin-left: 0px;
		z-index: 10;
}

.swing:hover{
		-webkit-animation-play-state: running;
		-webkit-animation: swing linear 0.8s;
        -webkit-transform-origin: center -20px 0;
}

@-webkit-keyframes swing{
    0% { margin-left: 5px; }
    25% { margin-left: -5px; }
    50% { margin-left: 10px; }
    75% { margin-left: -10px; }
    100% { margin-left: 0px; }
}


</style>
<script>

	
	$(".box").hover(function(){
		$(this).css({"background":"#fff"})
	},
	function(){
		$(this).css({"background":"#000"})
	});

</script>

</body>
</html>

なんだかなあ...
もっと簡単にできる方法ないかな