3
respostas

Estou tentando colocar fundos diferentes e um gradiente animado que coloquei não funcionou

Quis personalizar meu hearder com a ajuda do site https://www.gradient-animator.com/, mas a animação que escolhi não foi executada. Apareceu apenas um gradiente lilas comum. O console apresenta a seguinte mensagem nessas linhas: "unknown property name".

header {

    background: linear-gradient(270deg, #cc2b3f, #cc7a2b, #d9fb22, #6cea3d, #2abfe1, #833bbd);
    background-size: 1200% 1200%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;

    @-webkit-keyframes AnimationName {
        0%{background-position:0% 19%}
        50%{background-position:100% 82%}
        100%{background-position:0% 19%}
    }
    @-moz-keyframes AnimationName {
        0%{background-position:0% 19%}
        50%{background-position:100% 82%}
        100%{background-position:0% 19%}
    }
    @keyframes AnimationName {
        0%{background-position:0% 19%}
        50%{background-position:100% 82%}
        100%{background-position:0% 19%}
    }
}
3 respostas

Fala ai Tamires, tudo bem? O problema é que sua animação está dentro do contexto do header, @keyframes são definidos de forma global:

header {
    background: linear-gradient(270deg, #cc2b3f, #cc7a2b, #d9fb22, #6cea3d, #2abfe1, #833bbd);
    background-size: 1200% 1200%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% { background-position:0% 19% }
    50% { background-position:100% 82% }
    100% { background-position:0% 19% }
}

@-moz-keyframes AnimationName {
    0% { background-position:0% 19% }
    50% { background-position:100% 82% }
    100% { background-position:0% 19% }
}

@keyframes AnimationName {
    0% { background-position:0% 19% }
    50% { background-position:100% 82% }
    100% { background-position:0% 19% }
}

Espero ter ajudado.

Ficou perfeitooooo! Muito obrigadaaaa! <3

Magina Tamire, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software