diff --git a/packages/preset-mini/src/theme/types.ts b/packages/preset-mini/src/theme/types.ts index 12e1e846be..736db43f6b 100644 --- a/packages/preset-mini/src/theme/types.ts +++ b/packages/preset-mini/src/theme/types.ts @@ -3,6 +3,7 @@ export interface ThemeAnimation { durations?: Record timingFns?: Record properties?: Record + counts?: Record } export interface Theme { diff --git a/packages/preset-wind/src/rules/animation.ts b/packages/preset-wind/src/rules/animation.ts index bf47fd21f5..7796336252 100644 --- a/packages/preset-wind/src/rules/animation.ts +++ b/packages/preset-wind/src/rules/animation.ts @@ -15,8 +15,9 @@ export const animations: Rule[] = [ const duration = theme.animation?.durations?.[name] ?? '1s' const timing = theme.animation?.timingFns?.[name] ?? 'linear' const props = theme.animation?.properties?.[name] + const count = theme.animation?.counts?.[name] ?? 1 return `@keyframes ${name}${kf}\n${constructCSS( - Object.assign({ animation: `${name} ${duration} ${timing} infinite` }, props))}` + Object.assign({ animation: `${name} ${duration} ${timing} ${count}` }, props))}` } return { animation: h.bracket.cssvar(name) } }, { autocomplete: 'animate-$animation.keyframes' }], diff --git a/packages/preset-wind/src/theme.ts b/packages/preset-wind/src/theme.ts index 7c3c0e7f5b..b650099923 100644 --- a/packages/preset-wind/src/theme.ts +++ b/packages/preset-wind/src/theme.ts @@ -154,6 +154,14 @@ export const theme: Theme = { 'zoom-out-right': { 'transform-origin': 'right center' }, 'zoom-out-up': { 'transform-origin': 'center bottom' }, }, + counts: { + 'spin': 'infinite', + 'ping': 'infinite', + 'pulse': 'infinite', + 'pulse-alt': 'infinite', + 'bounce': 'infinite', + 'bounce-alt': 'infinite', + }, }, media: { portrait: '(orientation: portrait)',