feat: add no-unknown-animations rule

README.md

@@ -88,6 +88,7 @@ export default defineConfig([
 | [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)                         | Disallow invalid at-rules                             |       yes       |
 | [`no-invalid-named-grid-areas`](./docs/rules/no-invalid-named-grid-areas.md)         | Disallow invalid named grid areas                     |       yes       |
 | [`no-invalid-properties`](./docs/rules/no-invalid-properties.md)                     | Disallow invalid properties                           |       yes       |
+| [`no-unknown-animations`](./docs/rules/no-unknown-animations.md)                     | Disallow unknown animation names                      |       no        |
 | [`no-unmatchable-selectors`](./docs/rules/no-unmatchable-selectors.md)               | Disallow unmatchable selectors                        |       yes       |
 | [`prefer-logical-properties`](./docs/rules/prefer-logical-properties.md)             | Enforce the use of logical properties                 |       no        |
 | [`relative-font-units`](./docs/rules/relative-font-units.md)                         | Enforce the use of relative font units                |       no        |

docs/rules/no-unknown-animations.md

@@ -0,0 +1,131 @@
+# no-unknown-animations
+
+Disallow unknown animation names.
+
+## Background
+
+CSS animations are created by assigning a [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) rule's name to the [`animation-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name) property or the [`animation`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) shorthand property, as in this example:
+
+```css
+.card {
+	animation: fade-in 300ms ease;
+}
+
+.button {
+	animation-name: fade-in;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+```
+
+If an animation name doesn't match any `@keyframes` rule, for example because of a typo or because the `@keyframes` rule was renamed or removed, the animation doesn't run and the browser reports no error.
+
+## Rule Details
+
+This rule warns when an animation name used in `animation` or `animation-name` doesn't match any `@keyframes` rule defined in the same source. Vendor-prefixed properties such as `-webkit-animation` are checked too, and a vendor-prefixed `@keyframes` rule defines an animation name just like an unprefixed one does.
+
+Animation names are case-sensitive, and quoted and unquoted names refer to the same animation, so `animation-name: "fade-in"` matches `@keyframes fade-in`.
+
+In the `animation` shorthand, keywords are assigned to their corresponding sub-properties first. If a sub-property already has a value, another keyword for that sub-property is treated as the animation name:
+
+```css
+/* `ease-in` sets the timing function; `ease-out` is checked as the animation name */
+animation: ease-in ease-out;
+```
+
+The rule only checks animation names that can be determined statically. When a value contains `var()`, the names in its fallback are checked if there is one, and so is the rest of the value:
+
+```css
+/* `fade-in` is checked, the duration is not */
+animation: fade-in var(--duration);
+
+/* the fallback names an animation, so `slide-in` is checked */
+animation-name: var(--animation-name, slide-in);
+
+/* a nested fallback names an animation too, so `slide-in` is checked */
+animation-name: var(--animation-name, var(--fallback-name, slide-in));
+
+/* both fallback names are checked */
+animation-name: var(--animation-name, fade-in, slide-in);
+
+/* no name can be determined, so nothing is checked */
+animation-name: var(--animation-name);
+```
+
+Examples of **incorrect** code for this rule:
+
+```css
+/* eslint css/no-unknown-animations: "error" */
+
+.card {
+	animation: fade-in 300ms ease;
+}
+
+.button {
+	animation-name: slide-up;
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+```
+
+Examples of **correct** code for this rule:
+
+```css
+/* eslint css/no-unknown-animations: "error" */
+
+.card {
+	animation: fade-in 300ms ease;
+}
+
+.button {
+	animation-name: slide-up;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slide-up {
+	from {
+		transform: translateY(8px);
+	}
+
+	to {
+		transform: translateY(0);
+	}
+}
+```
+
+## Options
+
+This rule has no options.
+
+## When Not to Use It
+
+This rule only checks `@keyframes` rules in the same source, so it can't find animations defined in another stylesheet. If your `@keyframes` rules live in a different file from the animations that use them, you can disable this rule.
+
+## Prior Art
+
+- [`no-unknown-animations`](https://stylelint.io/user-guide/rules/no-unknown-animations/)