title: use Animate.css in ReactJS with react-animated-css
body: <p>I am trying to implement <code>Animate.css</code> in React and throughout my researches I found the package <code>react-animated-css</code> which seems to be quiet straightforward, however I couldn't make it work.</p>
  <p>In the documentation (if it's possible to call that a documentation) it's been said that the user should include the <code>Animate.css</code> in the HTML page, I didn't do that, since I am working with React and there is no HTML page, but I installed animate.css through npm.</p>
  <p>Here follows a sample of my code:</p>
  <pre><code>import {Animated} from 'react-animated-css'
  
  class ComponentTest extends Component {
  
    render () {
  
     return (
      &lt;div&gt;
        &lt;Animated 
           animationIn=&quot;fadeInDown&quot; 
           animationOut=&quot;zoomOut&quot; 
           animationInDuration={1000} 
           animationOutDuration={1000} 
           isVisible={true}
        &gt;
            &lt;h1 style={{backgroundColor: 'red'}}&gt;TESTE 1&lt;/h1&gt;
        &lt;/Animated&gt;
      &lt;/div&gt;
     )
   }
  }
  </code></pre>
  <p>I've also tried to set <code>isVisible</code> dynamically using a state, but without any success:</p>
  <pre><code>import {Animated} from 'react-animated-css'
  
  class ComponentTest extends Component {
  
    state = {animacao: false}
  
    toggleAnimation = () =&gt; {
  
       let animacao = !this.state.animacao
       this.setState({animacao})
    }
  
    render () {
  
     return (
      &lt;div&gt;
        &lt;Animated 
           animationIn=&quot;fadeInDown&quot; 
           animationOut=&quot;zoomOut&quot; 
           animationInDuration={1000} 
           animationOutDuration={1000} 
           isVisible={this.state.animacao}
        &gt;
            &lt;h1 style={{backgroundColor: 'red'}}&gt;TESTE 1&lt;/h1&gt;
        &lt;/Animated&gt;
        &lt;button onClick={this.toggleAnimation} &gt;Animação&lt;/button&gt;
      &lt;/div&gt;
     )
   }
  }
  </code></pre>
  <p>When I inspect my component I see that the classes are being applied in both cases:</p>
  <p><a href="https://i.stack.imgur.com/X9zBk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9zBk.png" alt="enter image description here" /></a></p>
  <p>Here is the page of the package: <a href="https://www.npmjs.com/package/react-animated-css" rel="nofollow noreferrer">https://www.npmjs.com/package/react-animated-css</a></p>
  <p>Any idea what I am doing wrong?</p>
  <p>P.S. Using this package is not a must, I am completelly open to suggestions.</p>