css3 animation逐帧动画的实现

1.在页面中写一个div来存放图片，.dome是来写动画的

<div class="iconBox">
        <div class="picture dome"></div>
         <p class="title">软件著作权</p>
</div>

 

 2.动画效果样式

　　.iconBox {
        .picture {
          margin: auto;
          width: 88px;
          height: 70px;
          background-image: url("../../static/images/businessArea/fl/fl-icon10.png");
        }
        .dome {
          animation: goBack 0.3s steps(7) forwards;
        }
        @keyframes goBack {
          from {
            background-position: 0 -510px;
          }
          to {
            background-position: 0 0;
          }
        }
    }
    .iconBox:hover .dome {
        .dome {
          animation: mover1 0.3s steps(7) forwards;
        }
        @keyframes mover1 {
          from {
            background-position-y: 0;
          }
          to {
            background-position-y: -510px;
          }
        }
     }

3.鼠标悬浮后的效果