Change in CSS left property not animating

In a list of steps in a recipe, all steps divs are displayed at position: absolute in a container with overflow: hidden.

A step hides off the right of the screen if it's an upcoming step, moves to the center (visible) for the current step, and then moves off to the left. (this is tracked as currentness) .

export const CookingStep = ({ step, currentness }: Props) => {

  const StepWrapper = styled.div({
    width: '100%',
    background: 'lightgrey',
    height: '100px',
    position: 'absolute',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: '1s ease',
    left: currentness! * 100 + '%' // left = -1, center = 0, right = 1
  })

  return <StepWrapper children={ step.text }/>
}

/* REDUX CONTAINER */

const selectProps = (state: RootState, ownProps: Props) =>
  ({ currentness: getCurrentness(ownProps.step)(state) })

const CookingStepContainer = connect(selectProps)(CookingStep)

export default CookingStepContainer

Everything's working correctly except it's not animating (from the transition property).

I'm pretty damned sure I'm not rerendering the parent of the CookingStep when I change steps (which would cause the steps to be removed, not rerendered, or something like that, and prevent the animation). I've tried a log statement inside of StepsCarousel to see when it renders, and it only renders once (at launch).

// Wrappers are just styled components

const StepsCarousel = ({ steps, incStep, decStep }: Props) =>
  <CarouselWrapper>
    <Arrow onClick={ incStep }>{ "<" }</Arrow>
    <StepsWrapper>{
      steps.map((step, i) =>
        <CookingStepContainer step={ step } key={ i }/>
      )
    }</StepsWrapper>
    <Arrow onClick={ decStep }>{ ">" }</Arrow>
  </CarouselWrapper>

I've mocked up the whole html/css layout and animation behavior at https://codesandbox.io/s/angry-grass-hjkw9 which took me a silly amount of painstaking brainwracking hours but is animating perfectly. I can't see a difference between what I did there and what I did here.

(On the codesandbox I used classnames instead of directly setting the left property with a styled component. But I've actually tried using classnames in the app as well to no avail).

Why isn't the animation working?