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
})