<template>
  <img
    :src="src"
    :style="{
      width: width,
      animation: animStr,
    }"
  />
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  duration: {
    type: Number,
    default: 800,
  },
  width: {
    type: Number,
    required: true,
  },
});

const animStr = `fade-in ${props.duration / 1000}s`;
</script>

<style scopped>
@keyframes fade-in {
  from {
    opacity: 0;
    top: -150;
  }
  to {
    opacity: 1;
    top: 0
  }
}
</style>
