javascript - 使用 styled-components，如何使用长格式 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 个不同的关键帧集之一。

标签： javascriptcss-animationsstyled-components

Answer 1

我真的错了，它确实像这样工作。问题实际上在于动画延迟：0、200ms；

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