前端用动画快速实现骨架屏效果

一、动画的语法

1.定义动画

@keyframes 自定义动画名称 {

  // 开始
  from {
  
  }

  // 结束
  to {
   
  }
}

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

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

  // 结束
  100% {
  
  }
}

2.调用

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向暂停动画执行完毕时状态

（属性写的时候不分先后顺序）

属性	作用	取值
animation-name	动画名称	自定义
animation-duration	动画时长	单位s(秒）
animation-delay	延迟时间	单位s(秒）
animation-timing-functio	速度曲线	linear 动画从头到尾的速度是相同的 ease 默认，动画以低速开始，然后加快，在结束前变慢 ease-in 动画以低速开始 ease-out 动画以结束开始 ease-in-out 动画以低速开始和结束
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画方向	normal 按时间轴顺序 reverse 时间轴反方向运行 alternate 轮流，即来回往复进行 alternate-reverse 动画先反运行再正方向运行，并持续交替运行
animation-play-state	暂停动画	running 继续 paused 暂停，通常配合:hover使用
animation-fill-mode	执行完毕时状态	none 回到动画没开始时的状态 forwards 动画结束后动画停留在最后一帧的状态 backwards 动画回到第一帧的状态 both 根据animation-direction轮流应用forwards和backwards规则注意：与iteration-count不要冲突(动画执行无限次)

3D基础语法可参考我的另一篇博客：https://mp.csdn.net/mp_blog/creation/editor/127406706

三、在vue3+ts中通过动画实现骨架屏效果

以下宽高可以通过组件传值自定义，这里给的是固定宽高

<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>

前端用动画快速实现骨架屏效果

猜你喜欢