The front end uses animation to quickly realize the skeleton screen effect

1. The grammar of animation

1. Define animation

@keyframes 自定义动画名称 {

  // 开始
  from {
  
  }

  // 结束
  to {
   
  }
}

// 或者还可以使用百分比定义

@keyframes 动画名称 {
  // 开始
  0% {
  
  }

  // 结束
  100% {
  
  }
}

2. call

animation: animation name, animation duration, speed curve, delay time, number of repetitions, animation direction, pause, state at the end of animation execution

(The attributes are written in no particular order)

Attributes	effect	value
animation-name	animation name	customize
animation-duration	animation duration	Unit s (second)
animation-delay	delay	Unit s (second)
animation-timing-functio	speed curve	A linear animation has the same speed from start to finish ease By default, the animation starts at a low speed, then speeds up, and slows down before ending ease-in animation starts at a slow speed ease-out animation starts with an end ease-in-out animations start and end at a slow speed
animation-iteration-count	repeat times	infinite is an infinite loop
animation-direction	animation direction	normal in timeline order reverse The time axis runs in the opposite direction alternate take turns, that is, go back and forth alternate-reverse The animation runs in the reverse direction and then in the forward direction, and continues to run alternately
animation-play-state	pause animation	running continue paused Paused, usually used with :hover
animation-fill-mode	Status at the end of execution	none return to the state when the animation did not start After the forwards animation ends, the animation stays in the state of the last frame backwards animation returns to the state of the first frame both Apply forwards and backwards rules in turn according to animation-direction Note: Do not conflict with iteration-count (animation is performed infinitely)

 3D basic grammar can refer to my other blog: https://mp.csdn.net/mp_blog/creation/editor/127406706

3. Realize the skeleton screen effect through animation in vue3+ts

The following width and height can be customized by passing values ​​from components, here is a fixed width and height

<script setup lang="ts">
defineProps<{
  animation: boolean
}>()
</script>
<template>
  <div class="big">
    <div class="little" :class="{ active: animation }"></div>
  </div>
</template>
<style lang="scss" scoped>
.big {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  overflow: hidden;
  .little {
    position: absolute;
    left: -200px;
    top: 0;
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, plum, yellowgreen, paleturquoise);
    &.active {
      animation: screen 0.8s infinite;
    }
  }
}
// 定义动画
@keyframes screen {
  // 开始
  from {
  }
  // 结束
  to {
    transform: translateX(600px);
  }
}

</style>