vue在做大屏项目开发时，需要添加一些动画元素，于是就研究如何做才能让页面的细节动画更生动。序列帧动画是其中的一个小思路。

组件代码

/**
* @Author: 858834013@qq.com
* @Name: stage
* @Date: 2022-07-25
* @Desc: 序列帧动画组件
*/
<template>
  <div class="fake">

  </div>
</template>

<script>

export default {
  name: "stage",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      status: ''
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

@keyframes fake {
  0% {
    background-image: url("../assets/page/gwbg.png");
    background-size: 100% 100%;
  }
  50.00% {
    background-image: url("../assets/page/gwbg2.png");
    background-size: 100% 100%;
  }
  100% {
    background-image: url("../assets/page/gwbg.png");
    background-size: 100% 100%;
  }
}

.fake {
  width: 188px;
  height: 163px;
  animation: fake 2.00s steps(1, start) infinite;
}

</style>