@ant-design/x/es/style/motion/blink.js

Craft AI-driven interfaces effortlessly

import { Keyframes } from '@ant-design/cssinjs';
export const blink = new Keyframes('antXBlink', {
  '0%': {
    backgroundPositionX: '-200%',
    backgroundPositionY: '100%'
  },
  '25%': {
    backgroundPositionX: '-100%',
    backgroundPositionY: '100%'
  },
  '50%': {
    backgroundPositionX: '-0%',
    backgroundPositionY: '100%'
  },
  '75%': {
    backgroundPositionX: '100%',
    backgroundPositionY: '100%'
  },
  '100%': {
    backgroundPositionX: '200%',
    backgroundPositionY: '100%'
  }
});
export const blinkMotion = (token, motionName) => {
  const motionCls = motionName;
  return [blink, {
    [token.componentCls]: {
      [motionCls]: {
        backgroundClip: 'text',
        color: token.colorTextBlinkDefault,
        WebkitBackgroundClip: 'text',
        // For Safari
        backgroundImage: `linear-gradient(90deg,transparent,${token.colorTextBlink},transparent)`,
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        animationTimingFunction: 'linear',
        animationFillMode: 'forwards',
        backgroundSize: '50%',
        backgroundRepeat: 'no-repeat',
        animationName: blink
      }
    }
  }];
};