svg---animation动画

svg排序动画

<div class="Big-data-icon"></div>

<style>
.Big-data-icon {
    animation: out 1.2s steps(29);
    background: url('./image/Big-data.png') top left;

    &:hover {
      animation: in 1.2s steps(29);
    }
  }
</style>


<script>
  @keyframes out {
    from {
      background-position-y: -2900px;
    }
    to {
      background-position-y: 0px;
    }
  }

  @keyframes in {
    from {
      background-position-y: 0px;
    }
    to {
      background-position-y: -2900px;
    }
  }

}
</script>