Emotion Styled Componentで配列の長さをアニメーションの変数にいれたい

Question

お知らせが配列の数によって下から上へ切り替わるアニメーションを作成しています、

現状:
今は配列の数に合わせて、それ用のslideNews数とanimationの秒数を配列の数*3 を手動で入れています。

slideNewsは以下を使います。

const slideNews2 = keyframes`
  0% { top: 100%  }
  5% { top: 0 }
  45% { top: 0 }
  50% { top: -135% }
  100% { top: -135% }
`;

cost slideNews3 = keyframes`
0% { top: 100% }
2% { top: 0 }
31% { top: 0 }
33% { top: -135% }
71% { top: -135% }
73% { top: -270  }
100% { top: -270% }
`;

お知らせが2個のとき

animation: `${slideNews2} 6s infinite`,

お知らせが3個のとき

animation: `${slideNews3} 9s infinite`,

**実現したいこと: **
用意したお知らせの配列が2個　３個のときでも、同じコードで実現したい。

animation: `${slideNews配列の長さ} 配列の長さ*3s infinite`,

const  App = () => {
  const array = [
    {
      title: 'news1',
      content: 'brabrabrabra1',
    },
    {
      title: 'news2',
      content: 'brabrabrabra2',
    },
    {
      title: 'news3',
      content: 'brabrabrabra3',
    }
  ]

  const arrayNum = array.length;

  return (
      <>
      {array.map((item, i) => (<InfoTitle　key={i}>{item.title}</InfoTitle>))}
      </>
  )

}

export default App;