0

I want to add an animation that requires me to use keyframe css. Where can I add in my react file so I can also use a variable in it?

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-**Add variable from react); //ideally add react variable here
  }
}

.movement {
  animation: move 20s linear infinite;
}

JSX file/React JS File

function MovingCircle() {
   const size = 10; //variable I would like to use on top. It changes depending on other things going on on the page

   return (
      <div className="">circle</div>
   )
}
journalsup
  • 138
  • 1
  • 10
  • 1
    Does this answer your question? [How to define css variables in style attribute in React and typescript](https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript) – Etheryte Jul 06 '22 at 21:23
  • @Etheryte I get that you can do an inline style like style={{color:pink}}. I guess my question is how to you translate keyframes (multiline style) into it? Never seen it done – journalsup Jul 06 '22 at 21:25
  • I would keep the style external as-is and use a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for the translate value, then define that variable with an inline style in React as shown in the above question. – Etheryte Jul 06 '22 at 21:39

0 Answers0