如何循環播放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> 

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小提琴演示

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，Chrome的webskit，safari一起使用，如果您也想使其與Opera一起使用，請使用-o-