利用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中,这样动画结束后,图片就不会消失。

你可能感兴趣的:(HTML5/CSS3)