먼저, Svelte에서 애니메이션을 적용하기 위해 animate 디렉티브를 사용합니다. 이 디렉티브를 사용하여 요소에 애니메이션 클래스를 추가할 수 있습니다.

아래는 animate 디렉티브를 사용하여 요소에 애니메이션을 적용하는 방법입니다:

<script>
  import { fadeIn } from 'svelte/transition';

  let show = false;
</script>

<div class="box" animate:fade="{show}">
  <p>안녕하세요!</p>
</div>

<button on:click="{() => show = !show}">토글</button>

<style>
  .box {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .box.fade {
    opacity: 1;
  }
</style>

위의 코드에서는 fade 트랜지션을 사용하여 애니메이션을 적용합니다. fadeIn 함수를 가져와서 애니메이션 효과를 정의하고, animate:fade 디렉티브를 사용하여 show 변수 값에 따라 애니메이션 클래스를 토글합니다.

또한, box.fade 스타일 클래스를 사용하여 투명도를 조정하여 애니메이션 효과를 생성합니다.

위의 예제에서는 페이드 인/아웃 애니메이션을 사용했지만, Svelte는 다양한 트랜지션을 제공하기 때문에 원하는 애니메이션 효과를 선택하여 사용할 수 있습니다.

이와 같이 Svelte에서 애니메이션을 적용하는 방법을 알아보았습니다. Svelte는 간결하고 효율적인 애니메이션 적용 방법을 제공하므로, 사용자 인터페이스에 동적인 요소를 추가할 때 유용하게 활용할 수 있습니다.