将CSS代码更改为特定的javascript代码文件

我正在开发一个需要js代码文件的计时器。我有如下css代码来实现时钟的时针和分针。我需要使用css动画将此特定代码更改为单独的js文件，使用样式化组件。我该如何做

.minute {

  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));

  stroke-width: 0.6;

  animation: rotateMinuteHand 3600s steps(60) infinite;

  animation-delay: calc(var(--start-seconds) * -1 * 1s);

}



.hour {

  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));

  animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;

  stroke-width: 1;

  animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));

}
 keyframes rotateMinuteHand {

  from {

    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));

  }

  to {

    transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));

  }

}



@keyframes rotateHourHand {

  from {

    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));

  }

  to {

    transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));

  }

}

这是我为分针尝试的代码。但是，这似乎不是为“动画延迟：计算（var（--start minutes）*-1*1s）”代码编写的

---

请考虑为我们创建一个你目前的问题。你读过动画吗？否则，你能提供一个你尝试的例子吗？@DrewReese请查看下面我尝试使用

样式的编辑代码。行

对我无效（必须更改为

div

）上述代码在代码沙盒中对我有效。你能提供一个运行的代码沙盒来重现你的问题吗？

import styled, { keyframes } from 'styled-components'

const rotateMinuteHand = props => keyframes`
    from {
      transform: translate(20px, 20px) rotate(${(props.startMinutes-33)*6}deg);
    }
    to {
      transform: translate(20px, 20px) rotate(${(props.startMinutes-33)*6+360}deg);
    }
`

  
const Minute = styled.line`
    transform: ${props => `translate(20px, 20px) rotate(${(props.minutes-33)*6}deg)`};
    stroke-width: 0.6;
    animation: ${props => {const kf = rotateMinuteHand(props); console.log(kf); return kf}} 3600s steps(60) infinite;
    animation-delay: calc(var(--start-minutes) * -1 * 1s);
    
`

export default Minute;