Mover barra de gradiente em CSS

Question

Aug 28, 2014, 07:40 PM

Mover barra de gradiente em CSS

Gostaria de ter uma barra colorida, com outra cor movendo-se através dessa barra. Deve ficar assim, com a parte branca em movimento:

Eu estava pensando em algo com gradiente e a propriedade de anmiation do CSS 3.Eu não quer usar JS! Eu tentei algo assim:

HTML:

<body>
    <div class="navbar_line"></div>
</body>

CSS:

.navbar_line {
animation: gradient 5s linear infinite; 
}
@-webkit-keyframes gradient
{

0% {
background: -moz-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* IE10+ */
background: linear-gradient(to right, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* W3C */
}

1% {
background: -moz-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* IE10+ */
background: linear-gradient(to right, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* W3C */
}

2% {
background: -moz-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* IE10+ */
background: linear-gradient(to right, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* W3C */
}

continua...

Acredite ou não, funciona! Eu escrevi um script que gerou essas linhas. Mas é enorme, maior que uma imagem e, portanto, não utilizável.

Espero que você encontre maneiras melhores.