Skip to main content
Correção de ortografia
Fonte Link
user167036
user167036

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ê dedeve 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>

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ê de colocar ponto antes indicando '.box-area' se um id '#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>

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>

Fonte Link
user167036
user167036

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ê de colocar ponto antes indicando '.box-area' se um id '#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>