Как я могу сметить свою анимацию вращения, передавая параметр стиля в стиль компонента? ⇐ CSS

[Anonymous]

Вот мое очень простое приложение, которое отображает 2 коробки с вращающимися границей: < /p>
import logo from './logo.svg';
import { AppContainer, Box } from './styles/containerStyles';
import './App.css';

function App() {
return (

Hello
Welcome

);
}

export default App;

< /code>
А вот компонент, который я использую < /p>
import styled, { keyframes, css } from 'styled-components'
import * as colors from './colorSheet.js';

const spacing = {
small: '0.5em',
medium: '1.0em',
large: '1.5em',
xlarge: '2.0em'
}

const size = {
thin: '0.1em',
small: '0.5em',
normal: '1.0em',
large: '1.5em'
}

export const AppContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;

width: 100vw;
height: 100vh;

background-color: ${colors.black};

position: relative;
z-index: -5

`;
/*works in IE */
export const Box = styled.div`
**--offset-angle: ${props => props.offsetAngle}deg;**

display: flex;
justify-content: center;
align-items: center;

width: 160px;
height: 160px;
border-radius: 15px;
margin: 0 auto;

color: ${colors.white};
background-color: ${colors.night};

position: relative;

&:after, &:before {
content: '';
height: 100%;
width: 100%;
border-radius: 15px;
background: linear-gradient(var(--angle), #ff3baf, #3b45ff);
padding: 6px;
position: absolute;
z-index: -1;
animation: rotate 3s linear infinite;
}

&:before {
filter: blur(1.5em);
opacity: 0.5;
}

@property --angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}

@keyframes rotate {
to {
--angle: 360deg;
}

`;

< /code>
Я все еще очень новый для этого, и я пытался выяснить, как использовать офсетейную опору для смещения анимации вращения на 180 градусов. Собственность моего стилизованного компонента, но на самом деле это не работает. Я пытался сделать что -то подобное < /p>
@property --angle {
syntax: "";
initial-value: 0deg + var(--offset-angle);
inherits: false;
}
< /code>
@keyframes rotate {
to {
--angle: 360deg + var(--offset-angle);
}
< /code>
and a lot of other combinations, but I can't seem to get this working and I thought it would be faster to ask here.

Подробнее здесь: https://stackoverflow.com/questions/794 ... to-a-style