CODEWITHSUNDEEP
htmlcssreactjs
user3421197
user3421197

Reputation: 318

Keyframes with Inline Styles ReactJS

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%;
}

Upvotes: 18

Views: 24450

Answers (1)

Furqan Masood
Furqan Masood

Reputation: 81

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

Upvotes: 1

Related Questions