How to loop a CSS3 fill up animation?

Problem

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;
}
Problem courtesy of: eveo

Solution

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>

Solution courtesy of: mdf

Discussion

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

Discussion courtesy of: blex
    .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

Discussion courtesy of: Naveen Singh raghuvanshi

This recipe can be found in it's original form on Stack Over Flow.