使用react样式组件设置动画列表项

Question

我想为列表项设置动画。每个列表项都是样式化组件。当我在列表项上应用动画时，我希望在每个列表项上都有动画，逐个应用。相反，动画一次应用于所有列表项。

  const listAnimate = keyframes`
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
`;

const Card = ({key,className,children}) => (
  <li key={key} className={className}>
    {children}
  </li>
)

const StyledCard = styled(Card)`
  margin-top: 1rem; 
  box-shadow: -3px 6px 43px -12px rgba(0,0,0,0.49); 
  padding: 1rem;
  animation: ${listAnimate} 1.5s ease-in 1s alternate;
  background-color: rgba(242,246,248,1);
`;

const IndexPage = ({data}) => {

  const nodes = data.allMarkdownRemark.edges 

  return (
  <div>
    <ul style={{listStyle: 'none', marginLeft: '0'}}>
      {nodes.map(({node},i) => 
        <StyledCard key={i}>
          <Link to={node.fields.slug} style={{ textDecoration: 'none' }}>
            <Header>{node.frontmatter.title}</Header>
            <Paragraph>{node.excerpt}</Paragraph>
          </Link>
        </StyledCard>
      )}
    </ul>
  </div>
  )
}

StyledCard组件应逐一显示，动画为opacity 0至1。