CSS animations are triggered twice

[boojum]

Describe the bug
CSS animations are run at least twice, even when instructed explicitly to only run once.

To Reproduce
Component with a simple animation:

<style>
  .ellipsis {
    padding: 0;
    margin: 0.33rem 0;
    cursor: pointer;
    letter-spacing: 0.23rem;

    & span {
      display: inline-block;
      font-size: var(--step-0);
      animation: fall 1.3s forwards;
      transform: translateY(-78px);
    }

    & :nth-child(1) {
      animation-delay: -0.9s;
    }

    & :nth-child(2) {
      color: #eb8921;
      animation-delay: -0.7s;
    }

    & :nth-child(3) {
      animation-delay: -0.3s;
    }
  }

  .hidden {
    display: none;
  }

  @keyframes fall {
    0% {
      transform: 78px;
    }

    100% {
      transform: translateY(7px);
    }
  }
</style>

<div on:click class="ellipsis">
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
</div>

The above animation will be triggered twice.

Expected behavior
Animation will only play once. It works with fine with svelte alone, the issue only occurs when using sapper.

Information about your Sapper Installation:

• Firefox 76.0

• Ubuntu 20.04

• Local

• Sapper version: 0.27.12

• Svelte version: 32.22.2

• dynamic application.

• Rollup

Severity
The issue makes animation-heavy UI uncomfortable and confusing to use, breaking the visual flow of the application.

[Conduitry]

Duplicate of #1088.