Is there a way to use keyframes with Rebass?
Tsabary opened this issue · 1 comments
Tsabary commented
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?
mmind-hub commented
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>