(addBase: PluginAPI["addBase"])
| 1 | import type { PluginAPI } from "tailwindcss/types/config.js"; |
| 2 | |
| 3 | export default function addKeyframes(addBase: PluginAPI["addBase"]) { |
| 4 | // keyframes for the animations |
| 5 | addBase({ |
| 6 | // if the user prefers reduced motion, don't apply the transform animations |
| 7 | "@media screen and (prefers-reduced-motion: no-preference)": { |
| 8 | "@keyframes motion-scale-in": { |
| 9 | "0%": { |
| 10 | scale: "var(--motion-origin-scale-x) var(--motion-origin-scale-y)", |
| 11 | }, |
| 12 | "100%": { |
| 13 | scale: "1 1", |
| 14 | }, |
| 15 | }, |
| 16 | "@keyframes motion-scale-out": { |
| 17 | "0%": { |
| 18 | scale: "1 1", |
| 19 | }, |
| 20 | "100%": { |
| 21 | scale: "var(--motion-end-scale-x) var(--motion-end-scale-y)", |
| 22 | }, |
| 23 | }, |
| 24 | "@keyframes motion-scale-loop-mirror": { |
| 25 | "0%, 100%": { |
| 26 | scale: "1 1", |
| 27 | }, |
| 28 | "50%": { |
| 29 | scale: "var(--motion-loop-scale-x) var(--motion-loop-scale-y)", |
| 30 | }, |
| 31 | }, |
| 32 | "@keyframes motion-scale-loop-reset": { |
| 33 | "0%": { |
| 34 | scale: "1 1", |
| 35 | }, |
| 36 | "100%": { |
| 37 | scale: "var(--motion-loop-scale-x) var(--motion-loop-scale-y)", |
| 38 | }, |
| 39 | }, |
| 40 | "@keyframes motion-translate-in": { |
| 41 | "0%": { |
| 42 | translate: |
| 43 | "var(--motion-origin-translate-x) var(--motion-origin-translate-y)", |
| 44 | }, |
| 45 | "100%": { |
| 46 | translate: "0 0", |
| 47 | }, |
| 48 | }, |
| 49 | "@keyframes motion-translate-out": { |
| 50 | "0%": { |
| 51 | translate: "0 0", |
| 52 | }, |
| 53 | "100%": { |
| 54 | translate: |
| 55 | "var(--motion-end-translate-x) var(--motion-end-translate-y)", |
| 56 | }, |
| 57 | }, |
| 58 | "@keyframes motion-translate-loop-mirror": { |
| 59 | "0%, 100%": { |
| 60 | translate: "0 0", |
no outgoing calls
no test coverage detected
searching dependent graphs…