Motion+

Keyframe wildcards

An example of using Motion for Vue's keyframe wildcards to create interruptible keyframe animations.

Vue
>Live exampleOpen

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.