animation-delay not working on css

Question

In the snippet provided below, the animation-delay property is not working. My word is fading in, so the animation is working, but I want the letters to come at different times.

Code Snippet:

.title {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
}
.position {
  position: absolute;
  top: 500px;
  left: 100px;
}
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in span:nth-child(1) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(2) {
  animation-delay: 1200ms;
}
.fade-in span:nth-child(3) {
  animation-delay: 800ms;
}
.fade-in span:nth-child(4) {
  animation-delay: 300ms;
}
.fade-in span:nth-child(5) {
  -webkit-animation-delay: 700ms;
}
.fade-in span:nth-child(6) {
  -webkit-animation-delay: 600ms;
}
.fade-in span:nth-child(7) {
  -webkit-animation-delay: 400ms;
}
.fade-in span:nth-child(8) {
  -webkit-animation-delay: 900ms;
}
.fade-in span:nth-child(9) {
  -webkit-animation-delay: 700ms;
}

<div class="fade-in title position">
  <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>T</span><span>I</span><span>O</span><span>N</span>
</div>

---

A couple of things to say. I am testing on safari, but for some reason it works without -webkit- on it, although I read somewhere that you need it. I am fairly new so not sure, but just in case I left it out on some of my child elements to test that it's not the problem. It doesn't work regardless. Something to note is that I have tried replacing the whole statement for the attribute color, like so:

.fade-in span:nth-child(1)  { color:red; }
.fade-in span:nth-child(2)  { color: green; }

and the letters do come in at different colors, so I am reaching my child elements, but for some reason the delay is not working. What am I forgeting? Thanks for your time.

Answer 1

You should fade the span, not the div, so I changed the rule .fade-in to .fade-in span, changed opacity to 0 so they start hidden and added animation-fill-mode: forwards so they stay visible

.title {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
}
.position {
  position: absolute;
  top: 100px;
  left: 100px;
}
.fade-in span {
  opacity: 0;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in span:nth-child(1) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(2) {
  animation-delay: 1200ms;
}
.fade-in span:nth-child(3) {
  animation-delay: 800ms;
}
.fade-in span:nth-child(4) {
  animation-delay: 300ms;
}
.fade-in span:nth-child(5) {
  -webkit-animation-delay: 700ms;
}
.fade-in span:nth-child(6) {
  -webkit-animation-delay: 600ms;
}
.fade-in span:nth-child(7) {
  -webkit-animation-delay: 400ms;
}
.fade-in span:nth-child(8) {
  -webkit-animation-delay: 900ms;
}
.fade-in span:nth-child(9) {
  -webkit-animation-delay: 700ms;
}

<div class="fade-in title position">
  <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>T</span><span>I</span><span>O</span><span>N</span>
</div>