利用html5/css3 动画效果，实现图片果冻抖动效果

需求：实现小图片从一大图片中弹出，到达顶点后发生3次抖动效果。

应用技术：html5 + css3

遇到问题：抖动结束后，图片会消失。

实现过程：

1、利用 -webkit-animation: icon09_move 1s;  属性实现动画属性， -webkit-animation-delay: 1.3s; 属性实现延迟属性。通过不同图片的延迟时间的不同，产生“喷溅”视觉效果。

2、利用@-webkit-keyframes icon09_move{
0%{ top:0px; left: 0px;}
50%{ top: -112px; left: -75px; }
70%{ top: -100px; left: -65px;}
80%{。。。}
90%{。。。}
100%{。。。 }
}

不同时间节点动画效果的不同，利用 left 和 top 坐标不同，实现果冻抖动效果。

3、解决动画玩成后，图片消失问题：

#img_09{
position: relative;
-webkit-animation: icon09_move 1s;
top: -112px; left: -75px;
}

在动画播放后，把动画最后的坐标卸载css中，这样动画结束后，图片就不会消失。