css实现图片动画效果

需求

项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。

实现过程

书写css

使用css的keyframe属性，配合animation。

   

    

     

      

     
     

      

       @keyframes ringing
      
     
    

     

      

     
     

      

       {
      
     
    

     

      

     
     

      
    from  {transform:rotate(-30deg);}
      
     
    

     

      

     
     

      
    to  {transform:rotate(30deg);}
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      

       .xxAnimation{
      
     
    

     

      

     
     

      
    animation: ringing 0.3s linear 0s 5 alternate;
      
     
    

     

      

     
     

      

       }
      
     
   
  

js配合

我们实现的效果应该是一进来的时候 晃两下，数据更新之后晃两下。js如下：

   

    

     

      

     
     

      

       if(data != 0){
      
     
    

     

      

     
     

      

           $("#messageMv").addClass("xxAnimation");
      
     
    

     

      

     
     

      
    setTimeout(function () {
      
     
    

     

      

     
     

      

               $("#messageMv").removeClass("xxAnimation");
      
     
    

     

      

     
     

      

           },1500)
      
     
    

     

      

     
     

      

       }
      
     
   
  

设置定时器的目的是让下次还能继续晃动，如果不拿掉，下次就不会晃动了。