Keyframes with Inline Styles ReactJS

Question

I'm trying to set the keyframes of a pulsate animation in ReactJS. I tried just setting the keyframes inside the inline style but that doesn't work.

My code

const NewRelpyheButton = ({style = {}, open, handleOPenSettings}) => {

    var bar = {
    color: '#000',
    padding: '1em 0',
    fontSize: '20px',
    textAlign: 'center',
    cursor: 'pointer',
    position: 'fixed',
    bottom: '0',
    width: '100%',
    zIndex: '10',
    animation: 'pulse 1.2s ease-in-out',
    animationIterationCount: 'infinite',
    }

    Object.assign(style, {});
    let openModal;
    if (open) {
        openModal = <Modal><NewRelpyhe/></Modal>
    }

    return (
        <div>
        {openModal}
        <Bar color='purple' style={bar} onClick={handleOpenSettings}>
            create a new relphye site
        </Bar></div>
    )
}

I'm trying to mimic this in css:

.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

html,
body {
  height: 100%;
}

Possible duplicate of How to dynamically create '@-Keyframe' CSS animations — John Ruddell
– John Ruddell, Commented May 26, 2016 at 0:28
It's because there is no way for React to know the pulse animation. — mateeyow
– mateeyow, Commented May 10, 2017 at 2:29

Furqan Masood · Accepted Answer · 2022-02-14 05:37:11Z

1

Here's how we will achieve it without adding any dependency.

{/*Your Js File Code */}

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import React from "react";
import "./test.css";

class Anim extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animationName: ""
    };
  }

  addStylesheetRules(rules) {
    var styleEl = document.createElement("style");
    document.head.appendChild(styleEl);
    var styleSheet = styleEl.sheet;
    styleSheet.insertRule(rules, 0);
  }

  clickHdl() {
    let animationName = `animation${Math.round(Math.random() * 100)}`;
    let keyframes = `
    @-webkit-keyframes ${animationName} {
        10% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)} 
        90% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)}
        100% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)}
    }`;

    this.addStylesheetRules(keyframes);

    this.setState({
      animationName: animationName
    });
  }

  render() {
    let style = {
      animationName: this.state.animationName,
      animationTimingFunction: "ease-in-out",
      animationDuration: "0.6s",
      animationDelay: "0.0s",
      animationIterationCount: 1,
      animationDirection: "normal",
      animationFillMode: "forwards"
    };

    return (
      <div>
        <button type="button" onClick={this.clickHdl.bind(this)}>
          Animation!
        </button>
        <div className="box" style={style}></div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Anim />
  </StrictMode>,
  rootElement
);


{/*Css Code test.css */}

.box {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

Demo: https://codesandbox.io/s/reverent-sun-qjo91?file=/src/index.js

edited Feb 14, 2022 at 5:37

answered Feb 13, 2022 at 16:56

Furqan Masood

813 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Elysium Over a year ago

"☝️🤓 Your answer could be improved..."

Greggory Wiley Over a year ago

Cool answer, is the @Furquan, is the @-webkit-keyframes bit the best way to do it? Can you just do regular keyframes css bit and allow the browser to translate it?

Collectives™ on Stack Overflow

Keyframes with Inline Styles ReactJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related