title: React styled-components fade in/fade out
body: <p>I am trying to build a React component to handle fading in and fading out. In  the following code, if I pass <code>out</code> as a prop to the component, it is disaplayed as hidden before animating out. I'm trying to have it fade in by default, then fade out when I pass in the <code>out</code> prop. Anyone see a solution to this problem?</p>
  
  <pre><code>import React from 'react';
  import styled, { keyframes } from 'styled-components';
  
  const fadeIn = keyframes`
    from {
      transform: scale(.25);
      opacity: 0;
    }
  
    to {
      transform: scale(1);
      opacity: 1;
    }
  `;
  
  const fadeOut = keyframes`
    from {
      transform: scale(1);
      opacity: 0;
    }
  
    to {
      transform: scale(.25);
      opacity: 1;
    }
  `;
  
  const Fade = styled.div`
    ${props =&gt; props.out ?
      `display: none;`
     : `display: inline-block;`
     }
    animation: ${props =&gt; props.out ? fadeOut : fadeIn} 1s linear infinite;
  `;
  
  function App() {
    return (
      &lt;div&gt;
        &lt;Fade&gt;&amp;lt;test&amp;gt;&lt;/Fade&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p><a href="http://www.webpackbin.com/Eydur2FDG" rel="noreferrer">WebpackBin running example</a></p>