¿Por qué no está funcionando esta animación en mi aplicación de React?

Estoy intentando hacer que esta animación funcione en mi proyecto de react. Debería ser un cuadrado que flota a través de la pantalla y vuelve. El cuadrado aparece pero la animación en sí no funciona. Intenté descargar Firefox para ver si era un problema del navegador, pero aún así no funciona.

Aquí está el componente del cuadrado que supuestamente flota:

import React from 'react';
import styled from 'styled-components';

const Sqaure = styled.div`
  width: 60px;
  height: 60px;
  background-color: #4e6bff;
  opacity: 0.7;
  position: absolute;
  top: -60px;
  left: -60px;
  z-index: -1;
  animation: square 25s linear alternate infinite;

@keyframes sqaure {
      to{
         transform: translate(100vw, 100vh);
      }
  }
`;
const AnimatedShapes = () => {
    return <sqaure></sqaure>;
}

export default AnimatedShapes;

El cuadrado no es visible porque está en la posición top y left de -60px, pero si cambias ambos a 0 lo verás.