Convert `animation.module.css` to CSS modules (#40228)

frontend/src/metabase/components/ProgressBar/ProgressBar.jsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import PropTypes from "prop-types";
 import { Component } from "react";
 
+import CS from "metabase/css/core/index.css";
 import { color as c } from "metabase/lib/colors";
 
 const propTypes = {
@@ -21,28 +22,27 @@ const ProgressWrapper = styled.div`
 `;
 
 const Progress = styled.div`
-      overflow: hidden;
-      background-color: ${props => props.color};
-      position: relative;
-      height: 100%;
-      top: 0;
-      left: 0;
-      border-radius: inherit;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      width: ${props => props.width}%;
-      transition: background-color 0.3s;
-      ":before": {
-        display: ${props => (props.animated ? "block" : "none")};
-        position: absolute;
-        content: "";
-        left: 0;
-        width: ${props => props.width / 4}%;
-        height: 100%;
-        background-color: ${c("bg-black")};
-        animation: ${props =>
-          props.animated ? "progress-bar 1.5s linear infinite" : "none"};
-      },
+  overflow: hidden;
+  background-color: ${props => props.color};
+  position: relative;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  width: ${props => props.width}%;
+  transition: background-color 0.3s;
+
+  "&::before": {
+    display: ${props => (props.animated ? "block" : "none")};
+    position: absolute;
+    content: "";
+    left: 0;
+    width: ${props => props.width / 4}%;
+    height: 100%;
+    background-color: ${c("bg-black")};
+  },
 `;
 
 // @Question - why is this separate from our progress Viz type?
@@ -65,7 +65,14 @@ export default class ProgressBar extends Component {
 
     return (
       <ProgressWrapper color={color} height={height} className={className}>
-        <Progress width={width} animated={animated} color={color} />
+        <Progress
+          width={width}
+          animated={animated}
+          color={color}
+          className={
+            animated ? CS.ProgressBarAnimation : CS.ProgressBarNoAnimation
+          }
+        />
       </ProgressWrapper>
     );
   }

frontend/src/metabase/css/core/animation.module.css

 /* TODO - ideally this would be more reusable and not hardcode a value */
-/* stylelint-disable-next-line selector-type-no-unknown */
-:global @keyframes progress-bar {
+@keyframes progress-bar {
   from {
     transform: translate3d(0, 0, 0, 0);
   }
@@ -9,3 +8,11 @@
     transform: translate3d(1000px, 0, 0);
   }
 }
+
+.ProgressBarAnimation {
+  animation: progress-bar 1.5s linear infinite;
+}
+
+.ProgressBarNoAnimation {
+  animation: none;
+}