animation-timeline

animation-timeline()

• CSS만으로 스크롤 애니메이션을 즉시 구현할 수 있게 해주는 기능

• 메인 스레드에서 실행되지 않으므로 웹사이트가 느려지지 않는다는 장점을 가짐

• mdn_공식문서_animation-timeline

■ 기존 방식의 CSS

스크롤을 하지 않아도, 애니메이션이 실행되기 때문에 자바스크립트로 스크롤해서 해당 요소를 만났을 때 애니메이션이 실행되도록 작성해야했음

/* 애니메이션 */
@keyframes animateRect {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rect {
  width: 100%;
  height: 300px;
  background-color: skyblue;
  animation: animateRect 10s;
}

See the Pen animation-timeline by 혬 (@jexbagvl-the-reactor) on CodePen.

■ animation-timeline()

animaition-duration 속성을 작성하지 않고, 대신 animation-timeline: scroll()을 사용해 타임라인에 따라 스크롤 애니메이션이 작동됨

/* 애니메이션 */
@keyframes animateRect {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rect {
  width: 100%;
  height: 300px;
  background-color: skyblue;
  animation: animateRect;
  animation-timeline: scroll();
}

See the Pen animation-timeline2 by 혬 (@jexbagvl-the-reactor) on CodePen.

● 브라우저 호환성

크롬, Edge에서 사용 가능