diff --git a/packages/card/__tests__/web/__snapshots__/card-loading-style.test.js.snap b/packages/card/__tests__/web/__snapshots__/card-loading-style.test.js.snap
index b6343fd534d..ac12113349e 100644
--- a/packages/card/__tests__/web/__snapshots__/card-loading-style.test.js.snap
+++ b/packages/card/__tests__/web/__snapshots__/card-loading-style.test.js.snap
@@ -80,7 +80,7 @@ exports[`1. card loading state 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
           "lastClassName": "c0",
           "rules": Array [
@@ -115,10 +115,10 @@ exports[`1. card loading state 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -402,7 +402,7 @@ exports[`2. card with reversed loading state 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
           "lastClassName": "c0",
           "rules": Array [
@@ -437,10 +437,10 @@ exports[`2. card with reversed loading state 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -648,4 +648,4 @@ exports[`2. card with reversed loading state 1`] = `
     </div>
   </StyledComponent>
 </Animations__FadeIn>
-`;
+`;
\ No newline at end of file
diff --git a/packages/card/__tests__/web/__snapshots__/card.web.test.js.snap b/packages/card/__tests__/web/__snapshots__/card.web.test.js.snap
index 0d69d7c7505..a8f6eec76f8 100644
--- a/packages/card/__tests__/web/__snapshots__/card.web.test.js.snap
+++ b/packages/card/__tests__/web/__snapshots__/card.web.test.js.snap
@@ -850,9 +850,9 @@ exports[`7. card with a loading state 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
-          "lastClassName": "dazpaJ",
+          "lastClassName": "ejSuos",
           "rules": Array [
             "border:0px solid black;box-sizing:border-box;display:flex;flex-direction:column;margin:",
             [Function],
@@ -885,10 +885,10 @@ exports[`7. card with a loading state 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -1055,9 +1055,9 @@ exports[`8. card with a loading state and no image 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
-          "lastClassName": "dazpaJ",
+          "lastClassName": "ejSuos",
           "rules": Array [
             "border:0px solid black;box-sizing:border-box;display:flex;flex-direction:column;margin:",
             [Function],
@@ -1090,10 +1090,10 @@ exports[`8. card with a loading state and no image 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -1219,9 +1219,9 @@ exports[`9. card with reversed loading state 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
-          "lastClassName": "dazpaJ",
+          "lastClassName": "ejSuos",
           "rules": Array [
             "border:0px solid black;box-sizing:border-box;display:flex;flex-direction:column;margin:",
             [Function],
@@ -1254,10 +1254,10 @@ exports[`9. card with reversed loading state 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -1424,9 +1424,9 @@ exports[`10. card with reversed loading state with no image 1`] = `
         "$$typeof": Symbol(react.forward_ref),
         "attrs": Array [],
         "componentStyle": ComponentStyle {
-          "componentId": "Animations__FadeIn-je5757-0",
+          "componentId": "Animations__FadeIn-w31u4-0",
           "isStatic": false,
-          "lastClassName": "dazpaJ",
+          "lastClassName": "ejSuos",
           "rules": Array [
             "border:0px solid black;box-sizing:border-box;display:flex;flex-direction:column;margin:",
             [Function],
@@ -1459,10 +1459,10 @@ exports[`10. card with reversed loading state with no image 1`] = `
         },
         "displayName": "Animations__FadeIn",
         "foldedComponentIds": Array [
-          "TsTcView-o5ytee-0",
+          "TsTcView-sc-154dp5w-0",
         ],
         "render": [Function],
-        "styledComponentId": "Animations__FadeIn-je5757-0",
+        "styledComponentId": "Animations__FadeIn-w31u4-0",
         "target": "div",
         "toString": [Function],
         "warnTooManyClasses": [Function],
@@ -1781,4 +1781,4 @@ exports[`15. card should re-render when loading state changes 2`] = `
     </div>
   </div>
 </div>
-`;
+`;
\ No newline at end of file