css3动画animation step使用记录

1、网上比较全的解释：

css3中animation的steps1、分步动画_animation steps_liu__software的博客-优快云博客

2、animation: w  4s step（number） forwards；

w：动画的名称

4s：动画结束的时间

steps（number）：分十步走完

forwards：结束之后停下来

3、在vue2中的测试代码

 

<template>

  <div>

    <div class="icon" :class="activeFlag?'inactive':''" @mouseenter="mouseoverIcon()" @mouseleave="mouseLeaveIcon()"></div>

  </div>

</template>

export default {

  name: 'HomeView',

  data(){

    return{

      activeFlag:false

    }

  },

  methods:{

    mouseoverIcon(){

      this.activeFlag = true

    },

    mouseLeaveIcon(){

      this.activeFlag = false

    }

  }

}

</script>

<style scoped>

.icon{

  display: block;

  width: 120px;

  height: 120px;

  background-repeat: no-repeat;

  background-size: 100% auto;

  background-position: top;

  margin-bottom: 10px;

  background:url('../assets/xuebitu.png')

}

.icon.inactive {

    animation: enterIcon .4s steps(16) forwards;

}

@keyframes enterIcon{

  100%{background-position:0 -1920px;}

}

</style>

xuebitu.png 图片地址https://qcloudimg.tencent-cloud.cn/raw/00073cc4281bab2f297dcfd8d007f62d.png

注意：图片number为17，height为2040px排序,动画里用百分比不流畅有卡顿，不知道为什么