Edit in JSFiddle

.agent-1, .agent-2, .agent-3 {
  background-color: lightblue;
}

.agent-2 {
  background-color: yellow;
}

.agent-3 {
  background-color: lightgreen;
}


.agent-1, .agent-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}

.agent-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.agent-3 {
  animation-delay: 0.8s;
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

<div class="agent-1">
  Text 111
</div>

<div class="agent-2">
  Text 222
</div>

<div class="agent-3">
  Text 333
</div>