Svelte animate on pageload (pulled directly from my project). Lines 45-46 and 50-52 are the important ones.

_layout.js

<style>
  .background {
    /* Set rules to fill background */
    min-height: 100%;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
  }
  .grey {
    background-color: #1f1f1f;
  }
  .moon {
    background-image: url(../../bg.jpg);
    background-size: 66%;
  }
</style>

<script context="module">
  import { makeClient, ME_QUERY } from "apollo.js"

  export async function preload() {
    return {
      cache: await makeClient(this.fetch).query({ query: ME_QUERY }),
    }
  }
</script>

<script>
  import { setupApollo } from "apollo.js"
  import Nav from "../components/Nav.svelte"
  import { fade } from "svelte/transition"
  import { onMount } from "svelte"

  // Load user from Apollo cache
  export let cache
  const me = setupApollo(ME_QUERY, cache)

  // Hooks to start animations on page load
  let loaded = false
  onMount(() => (loaded = true))
</script>

<div class="background grey">
  {#if loaded}
    <div in:fade="{{ duration: 500, delay: 250 }}" class="background moon">
      <div in:fade="{{ duration: 500, delay: 600 }}">
        <!-- Nav bar -->
        {#await $me}
          <div>loading</div>
        {:then result}
          <Nav me="{result.data.me}" />
        {:catch error}
          <div>Error loading user: {error}</div>
        {/await}

        <!-- Page content -->
        <div>
          <slot />
        </div>
      </div>
    </div>
  {/if}
</div>