Question

我到目前为止设法使它在悬停时背景从蓝色变为红色，但是我希望它在蓝色上环红色，然后蓝色在红色上，然后红色在蓝色上等。

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张牌才能让每种颜色在下一个颜色上方而不是上下运动。

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用css3动画关键帧：

.preloader:hover {
    animation: myLoop 2s ease infinite;
}

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

不要忘记供应商前缀（参见下面的js小提琴）。

JS Fiddle Demo

Answer 3

    .preloader:hover {
        -webkit-animation: changeit 4s linear infinite;
        -moz-animation: changeit 4s linear infinite;
        animation: changeit 4s linear infinite;
    }

    @keyframes changeit {
      0% {background-position: top;}
      50% {background-position: bottom;}
      100% {background-position: top;}
    }
    @-moz-keyframes changeit {
      0% {background-position: top;}
      50% {background-position: bottom;}
      100% {background-position: top;}
    }
    @-webkit-keyframes changeit {
      0% {background-position: top;}
      50% {background-position: bottom;}
      100% {background-position: top;}
    }

我们使用moz以便它可以使用firefox，webkit for chrome，safari，并使用-o-如果你想让它也适用于Opera

如何循环CSS3填充动画？

3 个答案:

JS Fiddle Demo