.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>