search

rebassjs / rebass

:atom_symbol: React primitive UI components built with styled-system.
https://rebassjs.org
MIT License
7.94k stars 658 forks source link

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

Open Tsabary opened 3 years ago

Tsabary commented 3 years ago

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?

https://github.com/rebassjs/rebass/issues/506

mmind-hub commented 3 years ago

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>