使用样式组件，如何使用长格式 css 动画语法来制作多个关键帧动画？

Question

因此，当通过长格式声明创建动画并且它具有多个指定名称时：

const animationNameCss = css`
    //insert keyframes here
`

let animatedImg = styled.img`
        animation-name: ${animationNameCss}, ${animationNameCss};
        animation-delay: 0, 200ms;
        animation-duration: 200ms;
        animation-timing-function: linear;
        animation-iteration-count: 1;
      `;

只执行第一个动画。这与连接标记模板有关还是样式组件不支持？目的是通过连接动画名称和动画延迟来创建多个回放 200 毫秒的动画。

AnimationNameCss 在实际代码中动态设置为 8 个不同关键帧集之一。

Answer 1

其实我错了，它确实是这样工作的。问题实际上出在 animation-delay: 0, 200ms;

应该是 0 毫秒、200 毫秒，动画按预期执行。

使用样式组件，如何使用长格式 css 动画语法来制作多个关键帧动画？

With styled-components, how to use the longform css animation syntax to have multiple keyframed animations?

javascript

css-animations

styled-components