[Dúvida] Animação só funciona uma vez.

Olá, boa tarde.

A animação da praia descendo só ocorre quando eu abro a aba do navegador pela primeira vez. Quando eu dou f5 ou atualizo algo ela não ocorre novamente igual as outras, somente quando eu abro a aba pela primeira vez.

Segue o código:

<svg id="praia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1552.61 980">
  
  <defs>

    <style>

      #caiaque-1, #caiaque-2{
        animation: movimento-caiaques-1e2 2.5s ease-in-out infinite alternate;
      }

       #caiaque-3, #caiaque-4{
        animation: movimento-caiaques-3e4 2.5s ease-in-out infinite alternate;
      }

       #caiaque-5{
        animation: movimento-caiaques-5 2.5s ease-in-out infinite alternate;
      }

       #nuvem-1, #nuvem-2{
        animation: movimento-nuvem-esq 60s ease-in-out infinite alternate;
      }

       #nuvem-3, #nuvem-4{
        animation: movimento-nuvem-dir 60s ease-in-out infinite alternate;
      }

      #praia {
        animation: inicia-pagina 2.5s ease-in-out forwards 1;
      }
  
        @keyframes movimento-caiaques-1e2{
          to{
            transform: translate(4px, -6px)
          }
        }

         @keyframes movimento-caiaques-3e4{
          to{
            transform: translate(-6px, 2px)
          }
        }

          @keyframes movimento-caiaques-5{
          to{
            transform: translate(3px, -8px)
          }
        }

          @keyframes movimento-nuvem-esq{
          to{
            transform: translate(-400px)
          }
        }

            @keyframes movimento-nuvem-dir{
          to{
            transform: translate(400px)
          }
        }
        
            @keyframes inicia-pagina{
          from{
            transform: translate(0, -2000px)
          }
        }



    </style>