delay 적용 안됨

딜레이가 적용이 안되는데 코드에서 어떤 부분이 잘못된 것일까요?? animation-fill-mode와 animation-delay 모두 다 주었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    }
    .skill-progress {
        background-color: #333;
        width: 500px;
        border-radius: 10px;
        color : white;
        text-align: center;
        padding: 10px;
    }
    .item {
        margin-bottom: 35px;
    }
    .item p{
        overflow: hidden;
        margin-bottom: 5px;
    }
    .item span:nth-child(1) {
        float: left;
    }
    .item span:nth-child(2) {
        float: right;
    }
    .progress {
        border : 1px solid aquamarine;
        padding: 5px;
        border-radius: 3px;
    }
    .progress-level {
        background: linear-gradient(to right, #fc6c85 0%, gold    100%);
        height: 7px;
        animation: ani 1s;
        animation-fill-mode: both;
    }
    @keyframes ani {
        0% {
            width: 0;
        }
    }
    .skill-progress .item:nth-of-type(1) .progress-level {
        animation-delay: 0s;
    }
    .skill-progress .item:nth-of-type(2) .progress-level {
        animation-delay: 0.2s;
    }
    .skill-progress .item:nth-of-type(3) .progress-level {
        animation-delay: 0.4s;
    }
    .skill-progress .item:nth-of-type(4) .progress-level {
        animation-delay: 0.6s;
    }
    .skill-progress .item:nth-of-type(5) .progress-level {
        animation-delay: 0.8s;
    }
  </style>
</head>

<body>

  <div class="skill-progress">
    <h1>SOFTWARE SKILLS</h1>
    <div class="item">
      <p>
        <span>HTML5</span><span>90%</span>
      </p>
      <div class="progress">
        <div class="progress-level" style="width: 90%"></div>
      </div>
      <p>
        <span>CSS3</span><span>80%</span>
      </p>
      <div class="progress">
        <div class="progress-level" style="width: 80%"></div>
      </div>
      <p>
        <span>jQuery</span><span>65%</span>
      </p>
      <div class="progress">
        <div class="progress-level" style="width: 65%"></div>
      </div>
      <p>
        <span>Photoshop</span><span>70</span>
      </p>
      <div class="progress">
        <div class="progress-level" style="width: 70%"></div>
      </div>
      <p>
        <span>illustrator</span><span>82%</span>
      </p>
      <div class="progress">
        <div class="progress-level" style="width: 82%"></div>
      </div>
    </div>
  </div>
  
  <script src="script\jquery-1.12.4.js"></script>
  <script src="script\custom.js"></script>

</body>
</html>
인프런 커뮤니티 질문&답변
