애니메이션 연결 및 순차 실행

애니메이션 순서를 지정하는 이유

animation-delay로 순서 지정하기

<div class="element">Slides in, then fades out</div>

여러 단계의 키프레임

<div class="toast">Notification toast</div>

지속 시간을 위한 CSS 사용자 지정 속성

<div class="box">Custom-property-driven timing</div>

animation-timeline(최신 기능)

CSS 사용자 지정 속성으로 시간차 적용하기

<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>

JavaScript로 순서 지정하기

주의 환기 애니메이션

<div class="notification">New message!</div>

AnimationEnd 이벤트

<div class="box" id="ae-box">Watch me</div>
<script>
  const el = document.getElementById('ae-box');
  el.addEventListener('animationend', (e) => {
    if (e.animationName === 'slideIn') {
      el.classList.add('phase-2');
      el.textContent = 'animationend fired!';
    }
  });
</script>

페이지 전환 패턴

<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>

로딩 상태 뼈대 화면

<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>

빠른 확인

복습