rebassjs/rebass

Is there a way to use keyframes with Rebass?

Tsabary opened this issue · 1 comments

Trying to figure it out but can't seem o find a way. I've seen this ticket from 2018 but I'm having a hard tim eimplementing what might be the solution?

#506

Hi @Tsabary ,
That's how I did it (just replace the single quotes ' with an escape` for the const variables):

import styled from '@emotion/styled';
import { keyframes } from '@emotion/core';

const rotateAnimation = keyframes'
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
';

const AnimatedBack = styled(Box)'
animation: ${rotateAnimation} 1s cubic-bezier(0.165, 0.84, 0.44, 1);
';

<AnimatedBack width={1}></AnimatedBack>