Keyframe animation not working with props

[ghost]

Hi everybody.
This example from here: https://styled-components.com/docs/api#keyframes
Does not work:

import styled, { css, keyframes } from 'styled-components'

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const animation = props =>
  css`
    ${pulse} ${props.animationLength} infinite alternate;
  `

const PulseButton = styled.button`
  animation: ${animation};
`

Passing animation length prevents the animation from being run.
I make most of my styling with style objects.
And I even managed to make my simple animation work if setting its duration inline.
But even using backtick notation, animation with props does not work.
And the above example from docs is not working, either.

Did someone figure out how to set up animation using style objects?
Or at least with tagged template literals?

[elzup]

this component needs animationLength (string) props.
https://stackblitz.com/edit/react-ts-ehstd5?file=App.tsx

<PulseButton animationLength={'1s'}>Button</PulseButton>

Certainly it would be helpful to have code examples in this document.

[quantizor]

The code in the example requires the animationLength prop to be passed to the component:

<PulseButton animationLength="1s">Click me</PulseButton>

Without passing that prop, the animation shorthand is incomplete (missing duration) and the browser ignores it. The existing comment in the thread confirms this.