Css / Styled Comp Animation фоновый градиент

Question

Здравствуйте, у меня проблемы с созданием анимации в градиентном фоновом режиме со стилизованным компонентом. Я не знаю, в чем я не прав:

код:

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 (
    <Div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </Div>
  );
}

пример: https://codesandbox.io/s/friendly-swanson-syuln

Answer 1

Чтобы изменить положение фона, размер фона должен быть больше контейнера - например, background-size: 200% 100%; ( песочница ).

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;
  background-size: 200% 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
`;