Question 307745 in CSS Question posted in
Some basic documentation can be found here.

how to write multiple value of css property in react?


import React from 'react';

function App() {

  const myStyle = {
    animation: 'fadein 0.5s, fadeout 0.5s 3s'
  };

  return (
    <>
      <div className='app' style={myStyle}>
       </div>}
    </>
  )
}

export default App;

How can I write multiple css property value into react? A CSS property animation have two value i.e fadein and fadeout. with fadeout one extra value 3s.

Tags:

3

Answers


  1. 0

    In order for this work, you will need to add keyframes specifying the behaviour of fadein and fadeout for example :

    @keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
    Login or Signup to reply.
  2. 0

    Each animation is separated by a comma. The first animation is ‘fadein’ with a duration of 0.5 seconds. The second animation is ‘fadeout’ with a duration of 0.5 seconds and a delay of 3 seconds (3s).

    I have made some changes to this code:

    import React from 'react';

function App() {
  const myStyle = {
    animation: 'fadein 0.5s, fadeout 0.5s 3s'
  };

  return (
    <>
      <div className='app' style={myStyle}>
      </div>
    </>
  );
}

export default App;
    Login or Signup to reply.
  3. 0

    You need to define keyframes.
    It is not supported by React for you to define keyframes inside the inline style object. Rather, your keyframes must be defined in a different CSS file, which your React component must then reference.

    /* styles.css */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

    A working example you can see on my codesandbox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search