How to loop a CSS3 fill up animation?

Question

I so far managed to make it so that on hover the background goes from blue to red, but I want it to loop red over blue, then blue over red, then red over blue etc.

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 animations with an infinite loop as others have said, but you need 3 cards to get each color to top the next instead of the up and down motion.

 .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

You can use css3 animation keyframes:

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

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

Dont forget about vendor prefixes (see js fiddle below).

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

We used moz so that it work with firefox, webskit for chrome, safari, and use -o- if u want to make it work with opera too