@keyframes complete {
from {
        opacity: 0;
    }

  to {
      opacity: 1;
      color: green;
  }
}

.complete {
animation: complete 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes in_danger {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: yellow;
    }
}

.in_danger {
    animation: in_danger 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}


@keyframes in_progress {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: orange;
    }
}

.in_progress {
    animation: in_progress 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes not_started {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: rgb(0, 4, 255);
    }
}

.not_started {
    animation: not_started 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}