6a482926b4
Co-authored-by: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com> Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: aakashb95 <aakashbakhle@gmail.com>
34 lines
630 B
Vue
34 lines
630 B
Vue
<script setup>
|
|
import Icon from 'next/icon/Icon.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<Icon v-once icon="i-woot-captain" class="jumping-logo" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.jumping-logo {
|
|
transform-origin: center bottom;
|
|
animation: jump 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes jump {
|
|
0% {
|
|
transform: translateY(0) scale(1, 1);
|
|
}
|
|
20% {
|
|
transform: translateY(0) scale(1.05, 0.95);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px) scale(0.95, 1.05);
|
|
}
|
|
80% {
|
|
transform: translateY(0) scale(1.02, 0.98);
|
|
}
|
|
100% {
|
|
transform: translateY(0) scale(1, 1);
|
|
}
|
|
}
|
|
</style>
|