Replace unique keyframes mixin with specific keyframe animation names

CHANGELOG

@@ -6,6 +6,7 @@ v 8.13.0 (unreleased)
   - AbstractReferenceFilter caches project_refs on RequestStore when active
   - Speed-up group milestones show page
   - Log LDAP lookup errors and don't swallow unrelated exceptions. !6103 (Markus Koller)
+  - Replace unique keyframes mixin with keyframe mixin with specific names (ClemMakesApps)
   - Add more tests for calendar contribution (ClemMakesApps)
   - Avoid database queries on Banzai::ReferenceParser::BaseParser for nodes without references
   - Fix permission for setting an issue's due date

app/assets/stylesheets/framework/logo.scss

-@mixin unique-keyframes {
-  $animation-name: unique-id();
-  @include webkit-prefix(animation-name, $animation-name);
-
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
 @mixin tanuki-logo-colors($path-color) {
   fill: $path-color;
   transition: all 0.8s;
@@ -20,28 +8,6 @@
   }
 }
-@mixin tanuki-second-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    10%, 80% {
-      fill: #{$tanuki-color}
-    }
-    20%, 90% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
-@mixin tanuki-forth-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    30%, 60% {
-      fill: #{$tanuki-color};
-    }
-    40%, 70% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
 .tanuki-logo {
   .tanuki-left-ear,
@@ -67,7 +33,7 @@
     }
     .tanuki-left-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-left-cheek) {
         0%, 10%, 100% {
           fill: lighten($tanuki-yellow, 25%);
         }
@@ -78,15 +44,29 @@
     }
     .tanuki-left-eye {
-      @include tanuki-second-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-left-eye) {
+        10%, 80% {
+          fill: $tanuki-orange;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
     .tanuki-left-ear {
-      @include tanuki-second-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-left-ear) {
+        10%, 80% {
+          fill: $tanuki-red;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
     .tanuki-nose {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-nose) {
         20%, 70% {
           fill: $tanuki-red;
         }
@@ -97,15 +77,29 @@
     }
     .tanuki-right-eye {
-      @include tanuki-forth-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-right-eye) {
+        30%, 60% {
+          fill: $tanuki-orange;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
     .tanuki-right-ear {
-      @include tanuki-forth-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-right-ear) {
+        30%, 60% {
+          fill: $tanuki-red;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
     .tanuki-right-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-right-cheek) {
         40% {
           fill: $tanuki-yellow;
         }
@@ -115,4 +109,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

app/assets/stylesheets/framework/mixins.scss

@@ -95,3 +95,10 @@
     @content;
   }
 }
+
+@mixin include-keyframes($animation-name) {
+  @include webkit-prefix(animation-name, $animation-name);
+  @include keyframes($animation-name) {
+    @content;
+  }
+}