CSS水平线动画（渐变颜色）

Question

我有一个像这样的着色、动画、垂直线：

@keyframes colored {
  0% {
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  }
  12.5% {
    background-image: -webkit-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
    background-image: -moz-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
    background-image: -o-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
    background-image: linear-gradient(to right, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1);
  }
  25% {
    background-image: -webkit-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
    background-image: -moz-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
    background-image: -o-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
    background-image: linear-gradient(to right, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde);
  }
  37.5% {
    background-image: -webkit-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
    background-image: -moz-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
    background-image: -o-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
    background-image: linear-gradient(to right, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe);
  }
  50% {
    background-image: -webkit-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
    background-image: -moz-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
    background-image: -o-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
    background-image: linear-gradient(to right, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c);
  }
  62.5% {
    background-image: -webkit-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
    background-image: -moz-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
    background-image: -o-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
    background-image: linear-gradient(to right, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71);
  }
  75% {
    background-image: -webkit-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
    background-image: -moz-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
    background-image: -o-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
    background-image: linear-gradient(to right, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca);
  }
  87.5% {
    background-image: -webkit-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
    background-image: -moz-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
    background-image: -o-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
    background-image: linear-gradient(to right, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f);
  }
  100% {
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  }
}
.colored {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  animation-name: colored;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<hr class="colored">

我在想是否有更好（即：更聪明）的方法来完成它。我花了一些时间来计算和准备所有的动画步骤（使用Excel），感觉很愚蠢。

第二个问题（基于其中一条评论）是这个动画能否更加流畅？如何实现？

- Mkay1

---

请尝试使用http://stackoverflow.com/help/mcve减少您的问题中的代码量。 - Jason D

@JasonD，我认为这就是原帖想要问的内容。在他们提问之前要求他们完成这个任务有点不公平。 - Jamie Bull

动画能否流畅？ - Thomas

也许这个渐变生成器有所帮助：http://www.colorzilla.com/gradient-editor/ - brandelizer

@brandelizer 我对动画的问题比渐变本身更为关注。 - Mkay1

Answer 1

这里是一个使用在他的答案中提到的方法的示例。你只需要使用两个水平线的副本并将它们放在一起，最后一个元素放在第一个元素之前。父元素的宽度需要是hr元素的两倍。然后，您可以轻松地动画化父元素，而不必在动画中重新绘制线性渐变。

@keyframes hr-animation {
  from{ transform: translate(0, 0); }
  to{ transform: translate(50%, 0); }
}
@-webkit-keyframes hr-animation {
  from{ -webkit-transform: translate(0, 0); }
  to{ -webkit-transform: translate(50%, 0); }
}
.hr-animation {
  -webkit-animation: hr-animation 5s linear infinite;
  animation: hr-animation 5s linear infinite;
}

body {
  margin: 10px 0 0 0;
  background: #555;
}

.colored {
  background-image: linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

.container {
  overflow: hidden;
  width: 100%;
}

.wrap {
  font-size: 0;
  height: 5px;
  width: 200%;
  position: relative;
}

.wrap hr {
  border: none;
  height: 5px;
  width: 50%;
  position: absolute;
}

.wrap hr:last-child {
  left: -50%;
}

<div class="container">
  <div class="wrap hr-animation">
    <hr class="colored ">
    <hr class="colored "> 
  </div>
</div>

- DavidDomain

Answer 2

保持您的结构最大化，这是我的解决方案。

.colored {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  padding-right: 50%;
  background-origin: content-box;
  background-size: 200%;
  animation-name: colored;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(8);
}

@keyframes colored {
  from {background-position: 0% 0%;}  
    to {background-position: 200% 0%;}
}

<hr class="colored">

我正在使用步进函数来实现背景位置的动画，因此颜色的离散变化很容易实现。

一个稍微棘手的问题是使用一个单一的渐变，响应式并可动画化。

如果您希望最简单的解决方案，并指出背景大小为100％不会受到百分比背景位置变化的影响。

诀窍是仅在元素的一半上设置背景（通过填充技巧实现），然后将尺寸设置为200％。

- vals

Answer 3

一种选择是使用两个元素，其中一个包含另一个。

外部元素将具有您想要的实际大小和位置。内部元素将是双倍大小，渐变重复两次。外部元素将具有overflow: hidden以遮蔽超出其边界的任何内容。

然后，您可以相对于外部元素动画内部元素的位置。

- jcaron