diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js index 64bab8411..bd34f5898 100644 --- a/src/util/parseAnimationValue.js +++ b/src/util/parseAnimationValue.js @@ -2,7 +2,15 @@ const DIRECTIONS = new Set(['normal', 'reverse', 'alternate', 'alternate-reverse const PLAY_STATES = new Set(['running', 'paused']) const FILL_MODES = new Set(['none', 'forwards', 'backwards', 'both']) const ITERATION_COUNTS = new Set(['infinite']) -const TIMINGS = new Set(['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']) +const TIMINGS = new Set([ + 'linear', + 'ease', + 'ease-in', + 'ease-out', + 'ease-in-out', + 'step-start', + 'step-end', +]) const TIMING_FNS = ['cubic-bezier', 'steps'] const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count. diff --git a/tests/plugins/animation.test.js b/tests/plugins/animation.test.js index be6d73376..565234852 100644 --- a/tests/plugins/animation.test.js +++ b/tests/plugins/animation.test.js @@ -13,10 +13,12 @@ test('defining animation and keyframes', () => { none: 'none', spin: 'spin 1s linear infinite', ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', + blink: 'blink 1s step-end infinite', }, keyframes: { spin: { to: { transform: 'rotate(360deg)' } }, ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } }, + blink: { '50%': { transform: 'scale(2)' } }, }, }, variants: { @@ -43,11 +45,20 @@ test('defining animation and keyframes', () => { } } + @layer utilities { + @variants { + @keyframes blink { + 50% { transform: scale(2); } + } + } + } + @layer utilities { @variants { .animate-none { animation: none; } .animate-spin { animation: spin 1s linear infinite; } .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } + .animate-blink { animation: blink 1s step-end infinite; } } } `)