Como dito o comentário acima, talvez voce tenha esquecido dois detalhes:
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;
Adicionar @keyframes no seu
<style>
.
links para estudos:
@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>