<template>
  <div style="width: 100px">
    <v-img
      class="gear"
      :height="height"
      src="@/assets/decorations/gear.svg"
    ></v-img>
  </div>
</template>

<script setup>
const props = defineProps({
  height: Number,
});
</script>
<style scoped>
.gear {
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  90% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
