CODEWITHSUNDEEP
cssreactjsanimationcss-in-js
Arman Zanjani
Arman Zanjani

Reputation: 327

Can I define and use a CSS at-rule in react.js component?

I have an animation that I want to use in a react.js component.

@keyframes pulse {
    0% {
        background-color: #94A3B8;
    }

    50% {
        background-color: #CBD5E1;
    }

    100% {
        background-color: #94A3B8;
    }
}

I can put it in a CSS file and import it into the react component. then i can reference it like this:

<div style={{animation: "pulse"}}></div>

I'm curious if animation can be defined in the component. something like this:

const animation = `
@keyframes pulse {
    0% {
        background-color: #94A3B8;
    }

    50% {
        background-color: #CBD5E1;
    }

    100% {
        background-color: #94A3B8;
    }
}
`

<div style={{ keyframes: animation }}></div>

Upvotes: 0

Views: 723

Answers (1)

0stone0
0stone0

Reputation: 43972

The easiest way is to use the <style> tagg to insert inline styling:

class ExampleClass extends React.Component {
  render() {
    return (
      <div>
        <h2>{'Test Inline Animation'}</h2>
        <div className='animate'>{'WhoeeeHoeee'}</div>
        <style>
            {`
                .animate {
                    animation-name: pulse;
                    animation-duration: 4s;
                }
                @keyframes pulse {
                    0% {
                        background-color: #94A3B8;
                    }

                    50% {
                        background-color: #CBD5E1;
                    }

                    100% {
                        background-color: #94A3B8;
                    }
                }
            `}
        </style>
      </div>
    );
  }
}

ReactDOM.render(<ExampleClass />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions