From 04e849c85e2c97de12b84b7e5322bb229da91caf Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Sat, 21 Feb 2026 16:18:41 -0800
Subject: [PATCH] Fix #1855: add VS Code CSS Custom Data file for IntelliSense
 support

Ship `animate-css-custom-data.json` so editors can surface completions
and documentation for the `--animate-duration`, `--animate-delay`, and
`--animate-repeat` custom properties.

Add a README section explaining how to enable IntelliSense in VS Code,
including class-name completion via the HTML CSS Support extension.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 README.md                    | 14 ++++++++++++++
 animate-css-custom-data.json | 23 +++++++++++++++++++++++
 package.json                 |  1 +
 3 files changed, 38 insertions(+)
 create mode 100644 animate-css-custom-data.json

diff --git a/README.md b/README.md
index c7ae5e378..1208506c2 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,20 @@ yarn add animate.css
 
 You can find the Animate.css documentation on the [website](https://animate.style/).
 
+## IDE / IntelliSense support
+
+Animate.css ships a [VS Code CSS Custom Data](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format) file (`animate-css-custom-data.json`) that enables IntelliSense for the CSS custom properties (`--animate-duration`, `--animate-delay`, `--animate-repeat`) exposed by the library.
+
+Add the following to your `.vscode/settings.json` (or user settings) to activate it:
+
+```json
+{
+  "css.customData": ["./node_modules/animate.css/animate-css-custom-data.json"]
+}
+```
+
+For **class-name completion** in HTML files, install the [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) extension and make sure your stylesheet (or `node_modules/animate.css/animate.css`) is linked in your project. The extension will automatically scan it and suggest the `animate__*` classes as you type.
+
 ## Accessibility
 
 Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
diff --git a/animate-css-custom-data.json b/animate-css-custom-data.json
new file mode 100644
index 000000000..529a1965e
--- /dev/null
+++ b/animate-css-custom-data.json
@@ -0,0 +1,23 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--animate-duration",
+      "description": "Sets the duration of all Animate.css animations. Defaults to `1s`.",
+      "syntax": "<time>"
+    },
+    {
+      "name": "--animate-delay",
+      "description": "Sets the delay of all Animate.css animations. Defaults to `1s`.",
+      "syntax": "<time>"
+    },
+    {
+      "name": "--animate-repeat",
+      "description": "Sets the number of times Animate.css animations repeat. Defaults to `1`.",
+      "syntax": "<number>"
+    }
+  ],
+  "atDirectives": [],
+  "pseudoClasses": [],
+  "pseudoElements": []
+}
diff --git a/package.json b/package.json
index 4ed88acef..8172a7459 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "animate.compat.css",
     "animate.min.css",
     "animate.css",
+    "animate-css-custom-data.json",
     "source/**/*.css"
   ]
 }