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">

我想知道它是否可以更好地完成(阅读:更聪明的方式).我花了一些时间来计算和准备所有动画步骤(使用excell),我觉得很愚蠢.

第二个问题(基于其中一个评论)是否这个动画可以更顺畅？怎么做到了？

Answer 1

这是一个使用jcaron在他的回答中提到的方法的示例 。您只需使用水平线的副本并将它们彼此相邻放置，即第一个元素之前的最后一个元素。父元素的宽度需要是其中一个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>

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%