0

Olá, pessoal. Sou iniciante em desenvolvimento web e queria resolver um problema que pode até ser básico pra alguns de vocês. Resumindo, não consigo fazer o VS code compilar essa parte do código css, mais precisamente a parte do "animate", onde claramente quando jogado no VSCode não há compilação.

box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 20s linear infinite;

No vídeo-curso que estava vendo o instrutor usou exatamente esses parâmetros. Alguém teria alguma sugestão do porque no animation o "animate" não é identificado pelo compilador?

1

1 Resposta 1

3

Como dito o comentário acima, talvez voce tenha esquecido dois detalhes:

  1. Adicionar a referencia correta no CSS, se 'box-area' for uma class você deve colocar um ponto antes indicando '.box-area' se um id um jogo-da-velha/hashtag '#box-area' do elemento alvo;

  2. Adicionar @keyframes no seu <style>.

links para estudos:

mdn w3schools

@keyframes animate0 {
  from {background-color: red;}
  to {background-color: yellow;}
}
.box-area-0 {
        position: absolute;
        display: block;
        list-style: none;
        width: 25px;
        height: 25px;
        animation: animate0 2s linear infinite;
}

@keyframes animate1 {
  from {background-color: rgba(0, 0, 0, 0.1);}
  to {background-color: rgba(255, 255, 255, 0.9);}
}
.box-area-1 {
        position: absolute;
        display: block;
        list-style: none;
        top: 30px;
        width: 25px;
        height: 25px;
        animation: animate1 2s linear infinite;
}
<div class="box-area-0">
</div>

<div class="box-area-1">
</div>

1
  • Cara, perfeito! Graças ao seu código consegui entender o problema. Obrigado mesmo!
    – Lucas
    Commented 3/06/2020 às 1:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .