diff --git a/src/util/parseAnimationValue.js b/src/util/parseAnimationValue.js
index 94c77ff3e44a..990e7aa8c8bc 100644
--- a/src/util/parseAnimationValue.js
+++ b/src/util/parseAnimationValue.js
@@ -54,7 +54,13 @@ export default function parseAnimationValue(input) {
       } else if (!seen.has('DELAY') && TIME.test(part)) {
         result.delay = part
         seen.add('DELAY')
-      } else result.name = part
+      } else if (!seen.has('NAME')) {
+        result.name = part
+        seen.add('NAME')
+      } else {
+        if (!result.unknown) result.unknown = []
+        result.unknown.push(part)
+      }
     }
 
     return result
diff --git a/tests/parseAnimationValue.test.js b/tests/parseAnimationValue.test.js
index 8fd211d2fb21..293d6fbec60a 100644
--- a/tests/parseAnimationValue.test.js
+++ b/tests/parseAnimationValue.test.js
@@ -38,6 +38,19 @@ describe('Tailwind Defaults', () => {
   })
 })
 
+describe('css variables', () => {
+  it('should be possible to use css variables', () => {
+    let parsed = parseAnimationValue('jump var(--animation-duration, 10s) linear infinite')
+    expect(parsed[0]).toEqual({
+      value: 'jump var(--animation-duration, 10s) linear infinite',
+      name: 'jump',
+      timingFunction: 'linear',
+      iterationCount: 'infinite',
+      unknown: ['var(--animation-duration, 10s)'],
+    })
+  })
+})
+
 describe('MDN Examples', () => {
   it.each([
     [