有一张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{
}@-webkit-keyframes shaking{25% {margin-top:-20px;}50% {margin-top:10px;}75% {margin-top:30px;}100% {margin-top:10px;}}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()