CODEWITHSUNDEEP
reactjsjss
Matt
Matt

Reputation: 1609

Using keyframes in JSS

I'm trying to apply an animation to an arrow in a react component using JSS. I can't seem to get the keyframes correct and getting the error 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>
    );
};

How can I correctly set my keyframes to enable the animation?

The animation should function like this: link

Upvotes: 3

Views: 3732

Answers (2)

Oleg Isonen
Oleg Isonen

Reputation: 1493

If you are using JSS v10 or higher, the code you posted now is correct, you can see what is being generated in the browser and here https://cssinjs.org/repl

Now you have some problem with the actual animation, not with JSS.

Upvotes: 2

Oleg Isonen
Oleg Isonen

Reputation: 1493

Add the @keyframes on the top level, not inside of the rule

Upvotes: 1

Related Questions