CSS动画实现跳动小鲸鱼

通过背景图片位置移动来实现小鲸鱼动画效果，效果图：

小鲸鱼.gif

      

      



//样式部分
.small-dolphin{
      position: relative;
      width: 140px;
      height: 108px;
      background: url(../../assets/images/chat/dolphin-bg.png);
      background-size: 100%;
      background-repeat: no-repeat;
      border-radius: 60%;
      .dolphin{
        position: absolute;
        top: 20px;
        width: 140px;
        height: 108px;
        background: url(../../assets/images/chat/dolphin.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: 10px 0px;
        animation: dolphin 5s ease-in forwards infinite;
        -webkit-animation: dolphin 5s ease-in forwards infinite;
      }
      @keyframes dolphin {
        0%{
          background-position: 10px 0px;
        }
        50%{
          background-position: 10px 20px;
        }
        100%{
          background-position: 10px 0px;
        }
      }
      @-webkit-keyframes dolphin {
        0%{
          background-position: 10px 0px;
        }
        50%{
          background-position: 10px 20px;
        }
        100%{
          background-position: 10px 0px;
        }
      }

      .wave{
        top: 20px;
        background-size: 90%;
        width: 140px;
        height: 108px;
        border-radius: 60%;
        background: url(../../assets/images/chat/dolphin-wave.png);
        background-repeat: no-repeat;
        background-position: 0px 40px;
        animation: wave 8s ease-in forwards infinite;
        -webkit-animation: wave 8s ease-in forwards infinite;
      }

      @keyframes wave {
        0%{
          background-position: 0% 40px;
        }
        25%{
          background-position: 50% 40px;
        }
        50%{
          background-position: 0% 40px;
        }
        75%{
          background-position: 50% 40px;
        }
        100%{
          background-position: 0% 40px;
        }
      }

      @-webkit-keyframes wave {
        0%{
          background-position: 0% 40px;
        }
        25%{
          background-position: 50% 40px;
        }
        50%{
          background-position: 0% 40px;
        }
        75%{
          background-position: 50% 40px;
        }
        100%{
          background-position: 0% 40px;
        }
      }

   }