feat(skeleton): replace the background animation with opacity

.changeset/salty-news-start.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components': patch
+'@alfalab/core-components-skeleton': patch
+---
+
+Изменена анимация с _background_ на _opacity_, теперь производительность анимации выше

packages/skeleton/src/default.module.css

@@ -4,15 +4,20 @@
     background: var(--skeleton-default-color);
 }
 
-.animate:before {
-    animation-name: background;
+.component.animate {
+    background: none;
 }
 
-@keyframes background {
+.component.animate:before {
+    background: var(--color-light-neutral-translucent-300);
+    animation-name: opacity-animation-default;
+}
+
+@keyframes opacity-animation-default {
     0% {
-        background: var(--color-light-neutral-translucent-100);
+        opacity: 0.7;
     }
     100% {
-        background: var(--color-light-neutral-translucent-300);
+        opacity: 0.9;
     }
 }

packages/skeleton/src/inverted.module.css

@@ -4,15 +4,20 @@
     background: var(--skeleton-inverted-default-color);
 }
 
-.animate:before {
-    animation-name: background-inverted;
+.component.animate {
+    background: none;
 }
 
-@keyframes background-inverted {
+.component.animate:before {
+    background: var(--color-light-neutral-translucent-300-inverted);
+    animation-name: opacity-animation-inverted;
+}
+
+@keyframes opacity-animation-inverted {
     0% {
-        background: var(--color-light-neutral-translucent-100-inverted);
+        opacity: 0.7;
     }
     100% {
-        background: var(--color-light-neutral-translucent-300-inverted);
+        opacity: 0.9;
     }
 }