Responsive shine animation using linear-gradient as background

问题

I want to create a shine loading animation which will appear on multiple elements with different background colors.

Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths.

Is there a way I can animate background-image with percentage units?

The animation created

body {
  background: black;
}

header {
  width: 100%;
  height: 50px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -100vw;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -100vw;    
  }
  100% {
    background-position: 100vw;   
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>  
</head>
<body>
  
  <header></header>
  

</body>
</html>

回答1:

An idea is to make the size of the gradient to be 3 times bigger than the container and color the middle part of it then you slide it from left to right:

body {
  background: black;
}

.box {
  height: 50px;
  margin:5px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 33%,
    rgba(255,255,255,0.3) 50%,
    transparent 66%
  );
  background-size:300% 100%;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: right;    
  }
  /*100% {
    background-position: left; it's the default value, no need to define it
  }*/
}

<div class="box"></div>

<div class="box" style="width:60%"></div>

<div class="box" style="width:40%"></div>

Another alternative for a different animation:

body {
  background: black;
}

.box {
  height: 50px;
  margin:5px;
  background-color: rebeccapurple;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    rgba(255,255,255,0.3) 25%,
    transparent 50%
  );
  background-size:200% 100%;
  animation: shine 1s infinite linear;
}

@keyframes shine {
  0% {
    background-position: right;    
  }
}

<div class="box"></div>

<div class="box" style="width:60%"></div>

<div class="box" style="width:40%"></div>

Related question: Using percentage values with background-position on a linear gradient

来源：https://stackoverflow.com/questions/55989735/responsive-shine-animation-using-linear-gradient-as-background

标签

html

css

css-animations

linear-gradients