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][1]
[w3schools][2]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    @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;
    }

<!-- language: lang-html -->

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

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

<!-- end snippet -->


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
  [2]: https://www.w3schools.com/css/css3_animations.asp