前端图片跳动效果

最近做企业站，想加个图片跳动的特效，这里记录一下，直接上代码
html代码

<div class="xl-box"> </div>

css代码

/*图片跳动效果*/
      .xl-box::before{
          content: '';
          background-image: url(../image/dailyprofit5.png); opacity: .2; border-radius: 50%;/*放上自己图片路径即可*/
          position: absolute;
          top: 67px;
          left: 0;
          animation: shadow .9s linear infinite;
      }
      .xl-box::after{
          border-radius: 5px;
          background-image: url(../image/dailyprofit5.png);;/*同上，也可跳动前后图片不同，看个人需求*/
          animation: rotate .9s linear infinite;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 500px;
          height: 350px;
      }
  @keyframes shadow {
      0%, 100% {transform: scaleX(1);}
      50% {transform: scaleX(1.2);}
  }

  @keyframes rotate {
      0% {
      transform: translateY(0) ;
    }
      25% {
          transform: translateY(10px);
      }
      50% {
          transform: translateY(20px) scale(1.1, 0.9);
         
      }
      75% {
          ransform: translateY(10px) ;
      }
      100% {
          transform: translateY(0) ;
      }
  }
/*end*/

参考链接 http://www.jiangweishan.com/article/CSS3JSDJFSDJF.html