CSS 애니메이션 🙀

css 애니메이션은 2007년 애플이 처음 웹에 도입한 이후 많은 발전을 해왔다.

그런데 조금만 복잡한 애니메이션을 구현하려면 서드파티 라이브러리나 방대한 자바스크립트 코드가 필요하다.

그러나, 이제는 css만으로 스크롤 애니메이션을 만들 수 있다는 소식을 조금 늦게 가져와 봤다 ‼️

 

스크롤 기반 애니메이션은 세 가지 요소로 구성된다.

1. target: 애니메이션을 적용할 페이지 내의 대상
2. keyframes: 사용자가 스크롤할 때 일어나는 변화
3. timeline: 애니메이션이 일어나는 결정 기준

 

타임라인

2023년 6월에 도입이 되었다. 스크롤 기반 애니메이션에서는 ‘시간’을 사용하지 않고, 타임라인의 유형인 scroll과 view를 이용해 구현한다.

 

scroll()

사용자의 스크롤에 따라 애니메이션이 진행된다.

사용자가 스크롤을 시작하면 애니메이션 시작, 스크롤을 중지하면 애니메이션이 중지된다.

사이트 하단에 스크롤하면 프로그레스바가 채워지는 UI를 본 적이 있을 건데, 그 경험을 예시로 들어보겠다.

footer::after {
  content: "";
  height: 10px;
  width: 100%;
  background: black;
  left: 0;
  bottom: 0;
  position: fixed;
  
  // animation-timeline 속성은 animation 속성 뒤에 설정해야 한다.
  animation: progress-expand;
  animation-timeline: scroll();
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

 

여기서 주의할 점 ‼️

여러 애니메이션이 혼합된 페이지의 경우 사용자가 불편하거나 어지러움을 느낄 수 있는데 이럴 때에는 추가로 적용하면 좋은 것이 하나 있다.
애니메이션 동작 줄이기 (prefers-reduced-motion)설정이다. 미디어쿼리로 감싸주는 것이 좋다.

@media not (prefers-reduced-motion) {
  // 애니메이션 작성
}

 

728x90

view()

scroll() 속성은 사용자가 스크롤을 시작하는 즉시 활성화된다. 화면에 보이는 요소나 뷰포트 등장 시점과는 상관없이 동작한다.

하지만, 대부분의 경우에는 화면에 요소들이 나타날 때 애니메이션이 실행되길 원하는데 이때 view() 속성을 사용하면 된다.

 

다음 예제 코드는 웹 페이지를 슬라이드하면 오른쪽에서 이미지가 슬라이드되어 나온다.

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

img {
  // animation-timeline 속성은 animation 속성 뒤에 설정해야 한다.
  animation: slideIn;
  animation-timeline: view()
  
  // 스크롤하여 화면에서 해당 요소가 없어질 때까지 슬라이드되는데 이걸 방지하기 위해 특정 자리까지만 위치하고 머무르게 만든다
  animation-range: 0% 50%;
}

 

마무리하며 🏁

개발은 종류부터, 깊이까지 너무 멀고도 험하다. 오늘 이 주제는 몰라도 자바스크립트나 외부 라이브러리를 사용해서도 구현이 가능하지만 더 코드를 짧고, 간략히 사용하는지에 대한 내용일 수 있다. 코드가 짧고 간략해야 보는 사람도 쉽고, 렌더링도 더 빨라지기 때문이다. 물론, 사람이 체감할 수 없는 아주 짧은 시간일 수도 있겠지만 말이다. 

 

 

이상 스텔라였습니다. ✍️