I am currently having an issue with 'keyframes' for styled components. I have come to understand how to use props in a 'styled.div', but I have not been able to use props in a 'keyframes' component.

I know the following example is a bit basic, but it gets the point across that I'm trying to make. What is wrong with the 'keyframes' version here:

```
const HomePageDiv = styled.div`
    background: ${(props) => `red`};
`;

const backgroundChange = keyframes`
    0%{
        background: ${(props) => `blue`};
    }
`;

```

Here the 'styled.div' component will render a red background, but if I include the keyframes animation, it is completely ignored. On the other hand, if I were to include the following keyframes animation:

```
const backgroundChange = keyframes`
    0%{
        background: blue;
    }
`;

```

I would have a perfect fade from blue to red. This has led me to believe that the 'keyframes' and 'styled.div' components have different syntax for props usage. Could someone help me understand the difference?