What exactly is the timeout value in React CSS Transition Group doing? : <p>I've been reading the official docs for <a href="https://facebook.github.io/react/docs/animation.html" rel="noreferrer">React Animations (React CSS Transition Group)</a>, but I'm a little unclear as to what the timeout values are used for - especially when I'm setting transitions within my CSS. Are the values a delay, duration of the animation, or how long that class is applied before being removed? And how do they relate to the duration of transitions set in my CSS? </p>

<p>For example, if I were to have a simple fade in/out when the component enters/leaves, I'd also set the opacity and transition duration within my CSS. Does the component then animated based on the timing passed in this value or the duration set within my CSS?</p>

<p>Here's an example provided by the official docs:</p>

<p><strong>My React Component</strong></p>

<pre><code>&lt;ReactCSSTransitionGroup 
  transitionName="example" 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={300}
&gt;
  {items}
&lt;/ReactCSSTransitionGroup&gt;
</code></pre>

<p><strong>My .css file</strong></p>

<pre><code>.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
</code></pre>

<p>Thanks!</p>
