Keyframe wildcards
An example of using Motion for Vue's keyframe wildcards to create interruptible keyframe animations.
Source code
<script setup>
import { motion } from "motion-v"
</script>
<template>
<motion.div
class="box"
:whileHover="{
scale: [null, 1.1, 1.6],
transition: {
duration: 0.5,
times: [0, 0.6, 1],
ease: ['easeInOut', 'easeOut']
}
}"
:transition="{
duration: 0.3,
ease: 'easeOut'
}"
/>
</template>
<style>
.box {
width: 100px;
height: 100px;
background-color: var(--hue-5);
border-radius: 5px;
}
</style>Related examples
Latest in Vue
Motion+
Unlock all 400+ examples
- Source code for every Plus example.
- Provide examples direct to your agent via Motion's MCP.
- Lifetime access to new examples and APIs.








