javascript - 如何循环 CSS3 填充动画？

Question

到目前为止，我设法做到了，悬停时背景从蓝色变为红色，但我希望它循环红色覆盖蓝色，然后蓝色覆盖红色，然后红色覆盖蓝色等。

http://jsfiddle.net/rfnslyr/1z14hwo5/

html

<div class="preloader"></div>

CSS

.preloader {
    background: #ff0000;
    height: 100px;
    width: 100px;
background: linear-gradient(to top, red 50%, blue 50%);
    background-size: 100% 200%;
    background-position:top;
    transition:all 2s ease;
}

.preloader:hover {
    background-position:bottom;
}

Answer 1

正如其他人所说的那样，CSS 动画具有无限循环，但您需要 3 张卡片才能让每种颜色排在下一个颜色之上，而不是上下运动。

.preloader {
  background: #ff0000;
  height: 100px;
  width: 100px;
  background: linear-gradient(
      to top, 
      red,
      red 33.3333%,
      blue 33.3333%,
      blue 66.66667%,
      red 66.66667%,
      red 100%
    );
  background-size: 100% 300%;
  background-position:top;
}

.preloader:hover {
    -webkit-animation: loaderLoop 2s linear infinite;
    -moz-animation: loaderLoop 2s linear infinite;
    animation: loaderLoop 2s linear infinite;
}

@-webkit-keyframes loaderLoop{
    0%{background-position:top;}
    100%{background-position:bottom;}
}

@-moz-keyframes loaderLoop{
    0%{background-position:top;}
    100%{background-position:bottom;}
}

@keyframes loaderLoop{
    0%{background-position:top;}
    100%{background-position:bottom;}
}

<div class="preloader"></div>