How should props be properly used within animations: ${styledKeyFrame} ${props.myProps}?
The problem:
import styled from 'styled-components';
const KeyFrameTest = styled.keyframes`
from { opacity: 0; }
to { opacity: 1; }
`;
const StyledComponent = styled.div`
animation: ${KeyFrameTest} 2s 4s ease-in; /* works */
animation: ${props => `${KeyFrameTest} 2s ${props.delay} ease-in`}; /* ERROR */
animation: ${props => `${styled.css`{KeyFrameTest}}` 2s ${props.delay} ease-in`}; /* ERROR */
`;
const PureComponent = () => <StyledComponent delay="3s" />;
export default PureComponent;