如何分别为每个div设置动画

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

#div1 {
  animation: slideIn 1s ease-in-out;
}

#div2 {
  animation: slideIn 1s ease-in-out 0.5s;
}

#div3 {
  animation: slideIn 1s ease-in-out 1s;
}