diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -933,7 +933,7 @@ export let corePlugins = {
   },
 
   animation: ({ matchUtilities, theme, config }) => {
-    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
+    let prefixName = (name) => escapeClassName(config('prefix') + name)
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]

diff --git a/tests/animations.test.js b/tests/animations.test.js
--- a/tests/animations.test.js
+++ b/tests/animations.test.js
@@ -277,3 +277,33 @@ test('with dots in the name and prefix', () => {
     `)
   })
 })
+
+test('special character prefixes are escaped in animation names', () => {
+  let config = {
+    prefix: '@',
+    content: [{ raw: `<div class="@animate-one"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+        },
+        animation: {
+          one: 'one 2s',
+        },
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes \@one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .\@animate-one {
+        animation: 2s \@one;
+      }
+    `)
+  })
+})

Animation Names Won't Be Escaped If Prefix Contains Especial Characters
**What version of Tailwind CSS are you using?**

v3.3.2

**What build tool (or framework if it abstracts the build tool) are you using?**

Tailwind Play

**What version of Node.js are you using?**

N/A

**What browser are you using?**

Chrome, Safari

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/ojvPuQftlm

**Describe your issue**

Using the `@` prefix in my configuration file will allow me to create animation utilities without escaping it, therefore not producing valid animations.

The link above allows you to test the same implementation with the `animate-spin` and `@animate-spin` utilities (by tweaking the prefix) to see that the output CSS does not escape the `@spin` animation.

tests/animations.test.js