<template>
  <div class="line"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";

// const showLine = ref(false);

// const lineAnimation = computed(() => {
//   showLine.value = true;
// });
// onMounted(() => {
//   setTimeout(lineAnimation(), 1000);
// });
</script>
<style>
/* .line {
  width: 2px;
  height: 0;
  background-color: #000;
  margin: 0 auto;
  transition: height 1s ease;
}
.line.active {
  height: 150px;
} */
/* @keyframes myfirst {
  100% {
    height: 100px;
  }
  75% {
    height: 75px;
  }
  50% {
    height: 50px;
  }
  25% {
    height: 25px;
  }
  0% {
    height: 0px;
  }
}

.line {
  width: 100px;
  background-color: aquamarine;
  transform: rotateX(180deg);
  position: absolute;
  bottom: 200px;
  left: 200px;
  animation-name: myfirst;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
} */
</style>
