Svelte에서 애니메이션 효과를 추가하는 가장 간단한 방법은 animate 함수를 사용하는 것입니다. animate 함수는 두 개의 매개변수를 갖습니다. 첫 번째 매개변수는 애니메이션을 수행할 요소, 두 번째 매개변수는 애니메이션 옵션 객체입니다.

<script>
  let visible = false;

  function toggleVisibility() {
    visible = !visible;
  }
</script>

<main>
  {#if visible} 
    <div transition:fade>
      <h1>Hello, Svelte!</h1>
      <p>Welcome to the world of animations!</p>
    </div>
  {/if}

  <button on:click={toggleVisibility}>
    Toggle Visibility
  </button>
</main>

<style>
  div {
    opacity: 1;
  }

  div.fade {
    transition: opacity 0.5s;
  }

  div:not(.fade) {
    opacity: 0;
  }
</style>

위의 예제에서는 상태 변수 visible을 사용하여 요소의 표시 및 비표시를 토글합니다. transition:fade는 애니메이션이 발생할 때 요소에 적용되는 클래스입니다. transition 속성을 사용하여 페이드 인/아웃 효과를 정의합니다.

위 예제에서는 fade 클래스를 사용하여 요소의 투명도를 조절하고 있습니다. 클래스 없이는 요소의 투명도가 0이 되어 숨겨집니다. fade 클래스를 추가하면 transition 속성에 지정한 시간 동안 투명도가 1이 됩니다.

애니메이션 효과를 더욱 세련되게 사용하고 싶다면, tweened 함수를 사용하여 값을 보간할 수도 있습니다. tweened 함수는 애니메이션을 위해 값을 안전하게 변환 및 보간하는 데 사용됩니다.

애니메이션 효과를 구현할 때 CSS 속성을 변경하기만 하면 되기 때문에 Svelte에서 애니메이션을 사용하는 것은 지금까지 경험한 것 중 가장 간단하고 직관적인 방법 중 하나입니다. 가장 기본적인 애니메이션 효과부터 복잡한 트랜지션까지 다양한 애니메이션을 Svelte에서 손쉽게 구현할 수 있습니다.