Esto es lo que estoy tratando de lograr:
const fallOff = keyframes` 0% { transform: translateY(0px); opacity: 1; } 80% { opacity: 0; } 100% { transform: translateY(120vh); opacity: 0; } `; export const Tiles = styled.div<{ size: number; delay: number; fallOff: boolean; }>` width: ${({ size }) => size - 4}px; height: ${({ size }) => size - 4}px; border: 1px #343434 solid; background-color: #191919; animation: ${(props) => props.fallOff ? `${fallOff} 1.5s ease-in forward` : null}; animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)}; `; Tengo varios mosaicos y su animación fallOff se activará con el valor de fallOff . Cada uno de ellos obtendrá animation-delay por cada uno de sus valores de delay en consecuencia. Cuando ejecuto esto, Uncaught Error: It seems you are interpolating a keyframe declaration (jGNlbV) into an untagged string.
Intentalo. Será trabajo. Saque la elección del nombre de la animación en una propiedad aparte.
const Tiles = styled.div<{ size: number; delay: number; fallOff: boolean; }>` width: ${({ size }) => size - 4}px; height: ${({ size }) => size - 4}px; border: 1px #343434 solid; background-color: #191919; animation: 1.5s ease-in forward; animation-name: ${(props) => props.fallOff ? fallOff : null}; animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)}; `;