1

How can I add animations with keyframes using the prop style in react?

e.g.

<div
    style={{
        animation: 'how to add the animation with keyframes here?'
    }}
>
</div>
Improve this question
3
  • 2
    Inline styles do not support keyframes. There is a hacky way of doing it using insertRule API. But is always better to bind a css class which implements this animations to a conditional attribution and merge the styles together using string interpolation or clsx /classnames like libraries. Or even jss dynamic styles Commented Dec 18, 2019 at 18:44
  • Here, check out styled-components. This will do what you are looking for, plus the bonus benefit of using proper CSS. stackoverflow.com/a/43500934/5066625 Commented Dec 18, 2019 at 18:59
  • This will do what you are looking for actually it does a different thing. The reason why I'm asking this question is because I'm coding in a legacy react project. That is why I'm trying to use it inline (everything in the project is inline) Commented Dec 18, 2019 at 19:02
Related questions
3
Using CSS animations in React.js
2
Animations with React JS
0
How to properly animate using CSS in React
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.