Entrar Ainda não tem acesso?
3
respostas

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

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Consolidando o seu conhecimento

por Tamires Raquel
| 34.7k xp | 5 posts

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
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Tamires Raquel
| 34.7k xp | 5 posts

Ficou perfeitooooo! Muito obrigadaaaa! <3

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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

Abraços e bons estudos.