Set keyframes-name-pattern to <dashed-ident>.

.stylelintrc.yaml

@@ -5,9 +5,6 @@ rules:
   block-no-empty: null
   declaration-block-no-redundant-longhand-properties: null
   declaration-empty-line-before: null
-  hue-degree-notation: number
-  media-feature-range-notation: prefix
-  no-descending-specificity: null
   comment-empty-line-before:
     - always
     - except:
@@ -15,6 +12,12 @@ rules:
       ignore:
         - stylelint-commands
         - after-comment
+  hue-degree-notation: number
+  keyframes-name-pattern:
+    - "--.+"
+    - message: Keyframe name should be written as <dashed-ident>
+  media-feature-range-notation: prefix
+  no-descending-specificity: null
   selector-class-pattern:
     - "^[a-z0-9\\-]+$"
     - message: Selector should be written in lowercase with hyphens (selector-class-pattern)

assets/sass/_zen.scss

@@ -166,10 +166,10 @@ article {
 }
 
 .flash-item {
-  animation: flash 500ms ease-in-out 1;
+  animation: --flash 500ms ease-in-out 1;
 }
 
-@keyframes flash {
+@keyframes --flash {
   50% {
     border-color: var(--color-warning);
     background-color: var(--color-warning-bg);

assets/sass/components/messages/_messages.scss

@@ -32,10 +32,10 @@
   }
 
   &--highlight {
-    animation: 2s ease-in-out infinite outline-highlight;
+    animation: 2s ease-in-out infinite --outline-highlight;
   }
 
-  @keyframes outline-highlight {
+  @keyframes --outline-highlight {
     50% {
       outline-width: .3rem;
     }