Drop Game

<template> <div class="homepage bg transparent"> <PageBackground /> <! <van cell center class="bg transparent mb [50px]" :border="false"> > <div class="text center"> <img class="h [100px] w [100px] rounded full" src="/src/assets/icons/avatar.jpeg" alt="avatar" /> <div class="username text white text lg font bold mb 8">huonggcm</div> <div class="text white text 4xl font bold flex items center justify center relative" > <span class="mr 2">258</span> <img src="/src/shared/icons/token.webp" class="w 8 h 8 coin" /> </div> </div> <! </van cell> > <div class="p 3"> <van card title="Drop game" desc="4" class="mb 2 bg [#333] text white rounded lg border 0" > <template #footer> <van button size="small" :round="true" class="px 3">Play</van button> </template> </van card> <div class="absolute font bold bottom 0 p 4 left 0 right 0"> <van button type="success" class="w full font bold text black text base bg [#c3f959] rounded md border 0" >Claim $57.600</van button > </div> </div> </div> </template> <script lang="ts" setup> import { onMounted } from "vue"; import { PageBackground } from "../../components"; onMounted(() => { const coin = document.querySelector(".coin") as HTMLElement; coin.classList.add("animate coin"); setTimeout(() => { coin.classList.remove("animate coin"); }, 3000); }); </script> <style lang="scss" scoped src="./styles.scss"></style> .homepage { height: 100%; display: flex; flex direction: column; justify content: center; } @keyframes zoomInSpin { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(12.5) rotate(0deg); margin right: 80px; } 75% { transform: scale(12.5) rotate(360deg); margin right: 80px; } 85% { margin right: 0px; } 95% { margin right: 0px; } 100% { transform: scale(1) rotate(360deg); } } .animate coin { animation: zoomInSpin 2s ease in out; } .coin { transition: transform 0.3s ease in out; z index: 10; } .coin:hover { transform: scale(1.1); } this is my code, coin is rotate 360deg, but i want keep zoom and update coin animation coin flipping