[material] Add "pulse" animation

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

A "pulse" animation seems to me like it's a pretty basic one along the lines of Grow, Slide, etc. The icon button already has a (bgcolor, I think) pulse built in, but there's no general mechanism for pulsing an element. Here's one for pulsing size:

interface PulseProps extends PropsWithChildren {
  durationMs?: number
}

export default function Pulse({
  duration = 400,
  children
}: PulseProps) {

  const pulse = keyframes `
    0% {
      transform: scale(1);
    }
      50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  `

  return (
    <Box
      sx={{
        animation: `${pulse} ${duration}ms ease`
      }}
    >
      {children}
    </Box>
  )
}

It would be cool to be able to specify the property that gets pulsed. I'm not sure exactly what that would look like?

<Pulse 
  property='opacity' 
  keyframes=[1, 0.5] 
/>

It's easy enough to make my own pulsing animations, as above, but I thought it worth adding this request to gauge the demand for a library component.

Examples 🌈

Here's a simple CSS pulse tutorial that's the basis of my component.

Motivation 🔦

In my case, I wanted to pulse a success icon after a long download finishes. In general, the pulse animation is useful for subtly drawing attention to a particular element on the screen after some change in state.

The issue does not name repository files, tests, or an entry point. Start by comparing the existing Grow and Slide components with the icon button's built-in pulse behavior, then determine whether a general Pulse API and configurable pulsed properties are wanted before implementation; done requires an agreed component design and corresponding coverage.