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

mdf · Accepted Answer · 2014-10-16 17:08:00Z

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>

blex · Accepted Answer · 2014-10-16 16:49:38Z

1

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

answered Oct 16, 2014 at 16:49

blex

25.7k6 gold badges48 silver badges78 bronze badges

1 Comment

eveo Over a year ago

awesome thats exactly it, except instead of bouncing, once the red reaches the top, the blue slides up, then red slides up etc. all from bottom to top, not bottom->top, top->bottom

Naveen Singh raghuvanshi · Accepted Answer · 2014-10-16 16:57:25Z

1

    .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

edited Oct 16, 2014 at 16:57

answered Oct 16, 2014 at 16:52

Naveen Singh raghuvanshi

1691 silver badge13 bronze badges

1 Comment

eveo Over a year ago

thanks. instead of bouncing, once the red reaches the top, the blue slides up, then red slides up etc. all from bottom to top, not bottom->top, top->bottom

Collectives™ on Stack Overflow

How to loop a CSS3 fill up animation?

3 Answers 3

Comments

JS Fiddle Demo

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related