如何在 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 列表，同样的，展开或者收缩的时候，也会有特效，那个特效怎么做的？

谢谢！