fix(skeleton): updates skeleton state performance (#7965)

* fix(skeleton): updates skeleton state performance

* chore(tests): update snapshots

Author: tw15egan

config/browserslist-config-carbon/index.js

@@ -7,4 +7,4 @@
 
 'use strict';
 
-module.exports = ['last 1 versions', 'ie >= 11', 'Firefox ESR'];
+module.exports = ['last 1 version', 'ie >= 11', 'Firefox ESR'];

packages/components/gulpfile.js

@@ -417,14 +417,7 @@ gulp.task('sass:dev', () => {
         })
       ).on('error', sass.logError)
     )
-    .pipe(
-      postcss([
-        customProperties(),
-        autoprefixer({
-          browsers: ['> 1%', 'last 2 versions'],
-        }),
-      ])
-    )
+    .pipe(postcss([customProperties(), autoprefixer()]))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('demo'))
     .pipe(browserSync.stream({ match: '**/*.css' }));

packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap

@@ -51,43 +51,34 @@ em {
 
 @keyframes skeleton {
   0% {
-    right: auto;
-    left: 0;
-    width: 0%;
+    transform: scaleX(0);
+    transform-origin: left;
     opacity: 0.3; }
   20% {
-    right: auto;
-    left: 0;
-    width: 100%;
+    transform: scaleX(1);
+    transform-origin: left;
     opacity: 1; }
   28% {
-    right: 0;
-    left: auto;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: right; }
   51% {
-    right: 0;
-    left: auto;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: right; }
   58% {
-    right: 0;
-    left: auto;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: right; }
   82% {
-    right: 0;
-    left: auto;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: right; }
   83% {
-    right: auto;
-    left: 0;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: left; }
   96% {
-    right: auto;
-    left: 0;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: left; }
   100% {
-    right: auto;
-    left: 0;
-    width: 0%;
+    transform: scaleX(0);
+    transform-origin: left;
     opacity: 0.3; } }
 
 .bx--grid {

packages/components/src/globals/scss/_helper-mixins.scss

@@ -185,13 +185,12 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 0%;
+    width: 100%;
     height: 100%;
     background: $skeleton-02;
     animation: 3000ms ease-in-out skeleton infinite;
     content: '';
+    will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -202,51 +201,42 @@
 @include exports('skeleton') {
   @keyframes skeleton {
     0% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
       opacity: 0.3;
     }
     20% {
-      right: auto;
-      left: 0;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: left;
       opacity: 1;
     }
     28% {
-      right: 0;
-      left: auto;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     51% {
-      right: 0;
-      left: auto;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     58% {
-      right: 0;
-      left: auto;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     82% {
-      right: 0;
-      left: auto;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     83% {
-      right: auto;
-      left: 0;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: left;
     }
     96% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
     }
     100% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
       opacity: 0.3;
     }
   }