css3 左右晃动效果

css3 左右晃动效果

<div class="box"></div>
<style>
	*{
		padding:0;
		margin:0;
	}
	.box{
		width:100px;
		height:100px;
		background:#098;
		margin:20px auto;
		-webkit-animation: rock 1s 0s ease-in-out infinite;
		-moz-animation: rock 1s 0s ease-in-out infinite;
		-ms-animation: rock 1s 0s ease-in-out infinite;
		-o-animation: rock 1s 0s ease-in-out infinite;
		animation: rock 1s 0s ease-in-out infinite;
	}
	@-webkit-keyframes rock {
		    0% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    10% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    20% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    30% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    35% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    40% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    45% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    50% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    100% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		}
		@keyframes rock {
		    0% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    10% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    20% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    30% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    35% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    40% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    45% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    50% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    100% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		}
</style>