Blink animation in Material UI

Question

I am building a GatsbyJS site with Material UI. 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?

Duran

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',
    },
});

Quisling

I think this is the valid with the hooks makeStyles() coming in. Thanks for including the link. – Calica

Answer 2

Yes, it is quite possible. For example:

const style = theme => (
{
    '@keyframes blinker': {
        from: {opacity: 1},
        to: {opacity: 0}
    },
    headerGT: {
            position: 'absolute',
            width: '60px',
            height: '60px',
            right: 17,
            backgroundImage: 'url(https://cdn3.iconfinder.com/data/icons/common-4/24/ui-21-512.png)',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'contain',
            border: 'none',
            bottom: '108px',
            opacity: '0.4',
            backgroundColor: 'red',
            animationName: 'blinker',
            animationDuration: '1s',
            animationTimingFunction: 'linear',
            animationIterationCount:'infinite',
    },
});

Eliaseliason

I tried to make this but I'm not familiar with this way of creating/using the style object. Could you please show me where it's going wrong? codesandbox.io/s/material-ui-flicker-animation-ebnmv?file=/src/… – Eparch

Answer 3

In MUI v5, you can define the animation using keyframes from emotion.

import { styled } from '@mui/material/styles';
import { keyframes } from '@mui/system';

const blink = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const BlinkedBox = styled('div')({
  backgroundColor: 'pink',
  width: 30,
  height: 30,
  animation: `${blink} 1s linear infinite`,
});

Live Demo

Colwin

yo, is there a way I can contact you ? – Ison

Answer 4

The following is an example of a blinking animation which can be turned on or off based on the component's disabled prop:

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
  '@keyframes flicker': {
    from: {
      opacity: 1,
    },
    to: {
      opacity: 0.7,
    },
  },
  flicker: {
    animationName: '$flicker',
    animationDuration: '1000ms',
    animationIterationCount: 'infinite',
    animationDirection: 'alternate',
    animationTimingFunction: 'ease-in-out',
  },
  withAnimation: ({ disabled }: { disabled: boolean }) => ({
    animationPlayState: disabled ? 'paused' : 'running',
  }),
});

const Component: React.FC<{ disabled }> = () => {
  const { flicker, withAnimation  } = useStyles({ disabled })

  return (
    <div className={`${flicker} ${withAnimation}`}>Hello</div>
  )
}

Note that there are 2 separate classes due to the fact that only animationPlayState is dependent on the value of the prop. However, animationName must be declared inside an object because @material-ui will map over the object and replace $flicker with the name of the animation which has a randomly generated hash appended to it (i.e. makeStyles-keyframes-flicker-4043). The mapping does not occur for object returned by the function which was invoked with props.

Stadium

I made this in a codesandbox for anyone interested: codesandbox.io/s/material-ui-flicker-animation-ebnmv?file=/src/… – Eparch