css3实现动画的上下摇动

有一张png格式的图片，用css3的animation()配合@keyframes特性，实现图片的上下摇动

原图如下：

html代码如下：

<img src="img/hand.png" id="shake_icon" />

css代码如下：

#shake_icon{
	width:100px;
	height:100px;
	animation: shaking 0.25s linear infinite;
	-webkit-animation: shaking 0.25s linear infinite;
}

@keyframes shaking{
	
	
        25% {
		margin-top:-20px;
	}
	50% {
		margin-top:10px;
	}
	75% {
		margin-top:30px;
	}
	100% {
		margin-top:10px;
	}
}@-webkit-keyframes shaking{25% {margin-top:-20px;}50% {margin-top:10px;}75% {margin-top:30px;}100% {margin-top:10px;}}




animation的用法：




在keyframs里面也可以调用css3中的2D  3D转换，过度效果
如：
      keyframes shaking{
        25% {
		translate(20,30);
	}
	75% {
		translate(40,50);
	}
	100% {
		translate(20,30);
	}
      }




2D效果：移动-translate()    旋转-rotate()     尺寸变化-scale()     翻转给定的角度-skew（）