Alternative to background-position used for loading skeleton ui?

user_13158008 0
Viewed 18

Google lighthouse is saying "Unsupported CSS Properties: background-position-x, background-position-y"

I currently have a skeleton-ui that's being used when images or certain things are loading.

According to the docs https://web.dev/animations-guide/ it says to use transform but so far I am not able to get it to animate the same way.

This is the current CSS I have

.sc-skeleton {
  background-color: $gray-ten;
  background-image: linear-gradient(90deg, $gray-ten, $gray-eight, $gray-ten);
  background-repeat: no-repeat;
  background-size: 200px 100%;
  display: block;
  line-height: 1;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 8px;
  animation: sc-skeleton-loading 1.8s ease-in-out 5;
}

@keyframes sc-skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

Skeleton animation

css html
1 Answers

I don't think there is such a property. You have to use a keyword value for background-position

/* Keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center;

/* values */ background-position: 25% 75%;

/* values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em;

/* Multiple images */ background-position: 0 0, center;

/* Edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px;

/* Global values */ background-position: inherit; background-position: initial; background-position: revert; background-position: revert-layer; background-position: unset;

From Mozilla : background-position

user_47794720
Related