title: Css / Styled Comp Animation background gradient
body: <p>Hello I'm having trouble making an animation in a gradient bacgrkound with the styled component I don't know where I am wrong:</p>
  
  <p>code:</p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  import styled, { css, keyframes } from "styled-components";
  
  const HeaderKeyFrame = keyframes`
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  `;
  const Div = styled.div`
    height:100vh,
    position: relative;
    flex: none;
    height: 530px;
    background-position: top center;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: ${HeaderKeyFrame} 15s ease infinite;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
  `;
  
  export default function App() {
    return (
      &lt;Div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;/Div&gt;
    );
  }
  </code></pre>
  
  <p>example: <a href="https://codesandbox.io/s/friendly-swanson-syuln" rel="nofollow noreferrer">https://codesandbox.io/s/friendly-swanson-syuln</a></p>