在 JSS 中使用关键帧答案

【问题标题】：Using keyframes in JSS在 JSS 中使用关键帧
【发布时间】：2021-05-26 19:38:16
【问题描述】：

我正在尝试使用 JSS 将动画应用于反应组件中的箭头。我似乎无法正确获取 keyframes 并获取错误 TypeError: container.addRule(...).addRule is not a function

const useStyles = createUseStyles({
    
      '@keyframes sdb05': {
        from: {
          transform: 'rotate(-45deg) translate(0, 0)',
          opacity: 0
        },
        to: {
          transform: 'rotate(-45deg) translate(-20px, 20px)',
          opacity: 1
        }
      },
      arrow:{
        animationName: '$sdb05',
        zIndex: 2,
        display: 'inline-block',
        '-webkit-transform': 'translate(0, -50%)',
        transform: 'translate(0, -50%)',
        color: '#fff',
        letterSpacing: '.1em',
        textDecoration: 'none',
        transition: 'opacity .3s',
        width: 50,
        height: 50,
        backgroundColor: 'rgb(255,255,255, 0.5)',
        borderRadius: '50%',
      '&:after': {
        position: 'absolute',
        bottom: 0,
        left: 0,
        content: '',
        width: '100%',
        height: '80%',
        background: '-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%)'
      },
      '& a': {
        '& span':{
            position: 'absolute',
            top: 8,
            left: '50%',
            width: 24,
            height: 24,
            marginLeft: -12,
            borderLeft: '2px solid #000',
            borderBottom: '2px solid #000',
            '-webkit-transform': 'rotate(-45deg)',
            transform: 'rotate(-45deg)',
            '-webkit-animation': 'sdb05 1.5s infinite',
            'animation': 'sdb05 1.5s infinite',
            boxSizing: 'border-box'
        },
        '&:hover': {
            opacity: .5
        }
      }
    }
});


const Arrow = () => {
    const classes = useStyles();
    return (
        <div className={classes.arrow}>
        <a href="#"><span></span></a>
        </div>
    );
};

如何正确设置关键帧以启用动画？

动画应该是这样的：link

【问题讨论】：

标签： reactjs jss

【解决方案1】：

在顶层添加@keyframes，而不是在规则内部

【讨论】：

更新了有问题的代码，但还是不行。

【解决方案2】：

如果您使用的是 JSS v10 或更高版本，那么您现在发布的代码是正确的，您可以在浏览器中看到正在生成的内容以及此处https://cssinjs.org/repl

现在你对实际动画有一些问题，而不是 JSS。

【讨论】：