title: Animate background gradient using styled-components
body: <p>I'm setting the background of the <code>&lt;Paper /&gt;</code> (I'm using Material-UI, v1.0.0-beta.25) as a gradient of colors. The colors are added automatically by clicking the Add button and choosing one from the color picker. By this time, my code does this:</p>
  
  <p><a href="https://i.stack.imgur.com/yGaWl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yGaWl.png" alt="enter image description here"></a></p>
  
  <p>I want to animate the background gradient of the component to get something like <a href="https://codepen.io/P1N2O/pen/pyBNzX" rel="nofollow noreferrer">this</a>. Using the code of the pen, removing some lines that I considered unnecessary and adding the implementation of <code>styled-components</code>, I wrote:</p>
  
  <pre><code>import styled, { keyframes } from 'styled-components';
  
  {/* rest of the code */}
  
  render() {
  
    const gradient = keyframes`
      0% {
        background-position: 0% 50%
      }
      50% {
        background-position: 100% 50%
      }
      100% {
        background-position: 0% 50%
      }
    `;
  
    const MyPaper = styled(Paper)`
      &amp;&amp; {
        background: ${ colors.length == 0 ? `linear-gradient(to right, ${ "#FFFFFF" }, ${ "#FFFFFF" })` 
          : `linear-gradient(to right, ${ colors.map((color, key) =&gt; color.name ) })` };
  
        animation: ${gradient} 15s ease infinite;
      }
    `;
  
    return (
      &lt;div&gt;
        &lt;div className = { classes.root }&gt;
  
          {/* Color selected */}
          &lt;div&gt;
            &lt;MyPaper className = { classes.paperStyle } elevation = { 4 }&gt;&lt;/MyPaper&gt;
          &lt;/div&gt;
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
          {/* rest of the code */}
  </code></pre>
  
  <p>but for some reason the background doesn't get animate. </p>
  
  <p>Am I doing something wrong, missing something, or is there another way to do that? I'll appreciate any help to achieve my goal. Thanks in advance!</p>