.walker {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  background-color: blue;
}

.counters {
  position: absolute;
  margin: 0 auto;
  left: 45%;
}

.counter {
  float: left;
  margin-right: 5px;
  display: block;
  height: 25px;
  width: 25px;
  border-radius: 4px;
  background-color: lightgray;
}

.in.active {
  background-color: greenyellow;
}

.out.active {
  background-color: orange;
}

.enterAnimation {
  animation: enterPulse 1s;
  animation-timing-function: ease-out;
}
.exitAnimation {
  animation: exitPulse 1s;
  animation-timing-function: ease-out;
}

@keyframes enterPulse {
  from {
    filter: drop-shadow(0px 0px 5px rgba(0, 255, 0, 0.7));
    fill: #2baf2b;
  }
  to {
    filter: drop-shadow(0px 0px 5px rgba(255, 127, 0, 0));
    fill: #071536;
  }
}

@keyframes exitPulse {
  from {
    filter: drop-shadow(0px 0px 5px rgba(255, 127, 0, 0.7));
    fill: #b46b10;
  }
  to {
    filter: drop-shadow(0px 0px 5px rgba(255, 127, 0, 0));
    fill: #071536;
  }
}