H5常用动画解决方案

匀速旋转效果

#obj{
    -webkit-animation:Rotate 2s linear infinite;
}
@-webkit-keyframes Rotate 
{
   from {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
   to {transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}

渐出变大效果

#obj{
   -webkit-animation:share_icon 1s linear;
}
@-webkit-keyframes share_icon {
    0% {-webkit-transform: scale(0.5); opacity:0}
    100% {-webkit-transform: scale(1); opacity:1}
}

呼吸灯动画

#obj{
   -webkit-animation:share_icon 1s linear infinite;
}
@-webkit-keyframes share_icon {
   0% {opacity:0}
   50% { opacity:1}
   100% { opacity:0}
}

监听动画结束

obj.addEventListener('webkitAnimationEnd', function(){
    // do something
})