Blink react-transition-group component

Blink.js

import React from 'react';
import { Transition } from 'react-transition-group';
import { withStyles } from '@material-ui/core/styles';
import classnames from 'classnames';

const duration = {
  enter: 2000,
  exit: 0
};

const transitionStyles = {
  '@keyframes blink': {
    '0%': {
      opacity:.2
    },
    '20%': {
      opacity:1
    },
    '75%': {
      opacity: 0.2
    }
  },
  entering: {
    animation: '0.6s ease $blink'
  },
  entered: {  },
  exiting:  {  },
  exited:  {  },
};

const Blink = ({ in: inProp, classes, children, onEnter, ...rest }) => {
  const handleEnter = (node, isAppearing) => {
    node.scrollTop; // Reflow so the animation always starts from the start.
    onEnter && onEnter(node, isAppearing);
  };

  return (
    <Transition
      in={inProp}
      timeout={duration}
      exit={false}
      onEnter={handleEnter}
      {...rest}
    >
      {(state) => {
        const compositeClass = classnames(children.props.className, classes[state]);
        return React.cloneElement(children, {...children.props, className: compositeClass});
      }}
    </Transition>
  );};

export default withStyles(transitionStyles)(Blink);