如何在 hover 过一个条目的时候，增加渐进的特效？

主要，有两个特效的问题，

• 经常看到一些列表 /list，里面有一些 items

当鼠标划过的时候(hover),item 会高亮，比如，底色变化成另外一种颜色。关键是，会有一个“逐渐明亮”或者“逐渐变化”的过程。

这个是如何实现的。

比如，我现在的 item css，会有一个 hover, 但真的只能“变色”，而且是突变，没有渐变的特效。

const StyledContainer = styled.div<Props>`
  display: flex;
  padding-left: ${props => props.level * defaultIndent}px;
  width: 100%;
  height: ${props.theme.size.xxxl};
  align-items: center;
  background: ${props =>
    !props.isSelected
      ? props.theme.color["300"]
      : props.theme.color["100"]};

  &:hover {
    background: ${props => props.theme.color["200"]};
  }
`;

• 有时候，有 expand/collapse 列表，同样的，展开或者收缩的时候，也会有特效，那个特效怎么做的？

谢谢！