Keyframe animation not working with props

[agt-ru]

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.