Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way to use keyframes with Rebass? #1113

Open
Tsabary opened this issue Jun 16, 2021 · 1 comment
Open

Is there a way to use keyframes with Rebass? #1113

Tsabary opened this issue Jun 16, 2021 · 1 comment

Comments

@Tsabary
Copy link

Tsabary commented Jun 16, 2021

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

@mmind-hub
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants