Background Degradê Animado com Css3

Neste artigo vamos fazer um Background Degradê Animado com Css3 animação @keyframes

A regra especifica o código de animação @keyframes

A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.

Durante a animação, você pode alterar o conjunto de estilos CSS muitas vezes.

Especifique quando a mudança de estilo acontecerá em porcentagem, ou com as palavras-chave “de” e “para”, que é a mesma que 0% e 100%. 0% é o início da animação, 100% é quando a animação está completa.

Vamos adicionar o Html:

<section class="box">

    <h1>Seu Titulo</h1>
    <p>Background Animado com Css3</p>

</section>

Vamos Adicionar o Css:

.box { 

    padding:10px 0px; 
    background: linear-gradient(-40deg, #ce3c03, #b90193, #00a5d7, #23d5ab);
    background-size: auto;
    background-size: auto;
    background-size: 250% 250%;
    -webkit-animation: gradient 10s ease infinite;
    animation: gradient 10s ease infinite;

}

@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 60%;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 60%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 60%;
    }
}

Veja Resultado Final do Background Degradê Animado com Css3.

Baixar Código Veja Funcionando