Blink animation in MUI

Question

I am building a GatsbyJS site with MUI. Using the withStyles HOC, is it possible to make a blinking animation? I tried providing animation in styles:

const styles = theme => ({
        '@keyframes blinker': {
            from: {opacity: 1},
            to: {opacity: 0}
        },
        headerGT: {
            color: 'white',
            animation: ['blinker', '1s', 'linear', 'infinite'],
            '-webkit-animation': ['blinker', '1s', 'linear', 'infinite'],
            '-moz-animation': ['blinker', '1s', 'linear', 'infinite'],
        }
    })

I can see the class and keyframes gets recognized and headerGT has the animation method when the DOM is build, but the animation does not fire. Any ideas?

Answer 1

I had the same problem but as specified in the JSS docs, referencing my animation with the $ prefix solved it.

Try this:

const style = theme => (
{
    '@keyframes blinker': {
        from: { opacity: 1 },
        to: { opacity: 0 },
    },
    headerGT: {
        [...]
        animationName: '$blinker',
        animationDuration: '1s',
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite',
    },
});