Theme UI Animation Keyframes

using the example from https://paulie.dev/posts/2021/02/theme-ui-alpha-6/#css-keyframes 
you could also store the animationName as a const




const animationTypeOne = keyframes({
                '0%': {
                  opacity: 1,
                },
                '20%': {
                  opacity: 0,
                },
                '100%': {
                  opacity: 1,
                },
              })

...
 {dots.map((dot, index) => (
          <Box
            key={index}
            sx={{
              animationDelay: `${index / 10}s`,
              animationDuration: '1.2s',
              animationTimingFunction: 'linear',
              animationIterationCount: 'infinite',
              animationName: animationTypeOne, // <= use a const as the animationName
              backgroundColor: 'primary',
              borderRadius: `${size}`,
              height: `${size}`,
              width: `${size}`,
              opacity: 0,
            }}
          />
        ))}

...