css实现文字从下往上滚动

<!--
Name: mixTextScrollHeight
Date  : 2022-11-12
-->
<template>
  <div class="scroll">
    <div class="scroll-item" :style="{ 'animation-duration': time }" ref="itemRef">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts" name="mixTextScrollHeight">
import { nextTick, ref } from 'vue';
const time = ref('5s');
const itemRef = ref<HTMLDivElement>();
nextTick(() => {
  time.value = `${(itemRef.value?.children.length || 5) * 1.5}s`;
})
</script>
<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow: hidden;

  .scroll-item {
    animation: anis 5s linear infinite;
  }
}

@keyframes anis {
  0% {
    opacity: 1;
    transform: translateY(20%)
  }

  40% {
    opacity: 1;
    transform: translateY(-40%)
  }

  97% {
    transform: translateY(-100%);
  }

  98% {
    opacity: 1;
    transform: translateY(-100%)
  }

  99% {
    opacity: 0;
    transform: translateY(-100%)
  }

  100% {
    opacity: 0;
    transform: translateY(20%)
  }
}
</style>