실전퍼블리싱(애니메이션 스킬 프로그래스바, delay)

애니메이션 스킬 프로그래스바, delay

---

예제보기

animation-delay를 사용할 때 주의할 점

막대가 차례대로 움직이게 해주고 싶어서 animation-delay를 넣었는데 생각했던거와 다르게 움직인다.

.progress .progress-level{
  height: 10px;
  background: linear-gradient(to right, crimson, gold);
  animation-name: ani;
  animation-duration: 1s;
}
@keyframes ani {
  0% {
    width: 0;
  }
}
.skill-progress .item:nth-child(1) .progress-level {
  animation-delay: 0s;
}
.skill-progress .item:nth-child(2) .progress-level {
  animation-delay: 0.2s;
}
.skill-progress .item:nth-child(3) .progress-level {
  animation-delay: 0.4s;
}
.skill-progress .item:nth-child(4) .progress-level {
  animation-delay: 0.6s;
}
.skill-progress .item:nth-child(5) .progress-level {
  animation-delay: 0.8s;
}

animation-fill-mode

animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정한다.

애니메이션과 관련된 속성(Animation Related Properties)

animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정한다.
animation-delay 속성은 애니메이션 지연 시간을 설정한다.
animation-direction 속성은 애니메이션 움직임 방향을 설정한다.
animation-duration 속성은 애니메이션 움직임 시간을 설정한다.
animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정한다.
animation-iteration-count 속성은 애니메이션 반복 횟수를 설정한다.
animation-name 속성은 애니메이션 keyframe 이름을 설정한다.
animation-play-state 속성은 애니메이션 진행상태를 설정합한다.
animation-timing-function 속성은 애니메이션 움직임의 속도를 설정한다.

속성(Property)

속성값	설명
none	애니메이션이 끝난 후 상태를 설정하지 않습니다.
forwards	애니메이션이 끝난 후 그 지점에 그대로 있습니다.
backwards	애니메이션이 끝난 후 시작점으로 돌아옵니다.
both	애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.
inherit	애니메이션의 상태를 상위 요소한테 상속받습니다.

.progress .progress-level에 animation-fill-mode: both;를 넣어주면 자연스러운 결과를 얻을 수 있다.

그래도 뭔가 이상하다. 마지막으로 나와야하는 Illustrator가 가장 먼저나오는 이유는 nth-child()가 h1태그부터 1번으로 잡기때문이다.

이 것을 해결해 줄 수 있는 속성이 nth-of-type()이다.
nth-child()대신 넣어주면 된다.

nth-of-type()

동일한 유형(태그 이름)의 형제 간의 위치를 기반으로 요소를 찾는다.

.progress .progress-level{
  height: 10px;
  background: linear-gradient(to right, crimson, gold);
  animation-name: ani;
  animation-duration: 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;
}