Using keyframes in `css` prop

[Deleted user]

I’m trying to migrate a styled-components component showing a spinner to a Rebass component. I found an example for pseudo-classes in the docs, but I cannot figure out how to use keyframes. What would be the correct syntax – and is it supported?

<Box
  css={{
    display: "inline-block",
    width: "64px",
    height: "64px",

    "&:after": {
      content: " ",
      display: "block",
      width: "46px",
      height: "46px",
      margin: "1px",
      borderRadius: "50%",
      border: `5px solid ${props => props.theme.colors.secondaryDark}`,
      borderColor: `${props => props.theme.colors.secondaryDark} transparent
      ${props => props.theme.colors.secondaryDark} transparent`,
      animation: `lds-dual-ring 1.2s linear infinite`
    },

    "@keyframes lds-dual-ring": {
      "0%": {
        transform: "rotate(0deg)"
      },
      "100%": {
        transform: "rotate(360deg)"
      }
    }
  }}
/>

[jxnblk]

You'll need to use the styled-components keyframes API (https://www.styled-components.com/docs/basics#animations) but the object returned from keyframes only works within the styled function afaik. I started an example here for reference: https://github.com/rebassjs/rebass/tree/keyframes-example/examples/keyframes

[Nosherwan]

@jxnblk I am having the same issue however the example link you had provided above is gone now.
I am trying to use the animation property with keyframes using styled components with rebass as below but it doesnt seem to be working.
Also in your comment above you have stated keyframes only work with styled functions, can you please elaborate that?
Thanks.

import { Flex, Box, Image } from 'rebass';
import { keyframes, css } from 'styled-components';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

const animateBox = css`
animation: ${rotate} 2s linear infinite;
`;

<Box
{...animateBox}
sx={{
display: hideUninsulated ? 'none' : 'flex',
}}>
</Box>

[Nosherwan]

I figured it out how to do it. So for anyone else who wants to do this and cant figure out here is some sample syntax:

import { Flex, Box, Image } from 'rebass';
import { keyframes, css } from 'styled-components';

const animate = (marginTop) => keyframes`
    from {
        margin-top: -640px;
        opacity: 0;
    }
    to {
        margin-top: ${marginTop};
        opacity: 1;
    }
`;

const MBox = Styled(Box)`
    animation: ${(props: any) => animate(props.marginTop)} .25s ease-in-out;
`;

[Tsabary]

@Nosherwan in your example, what is Styled?