现在我有一个 div：

然后它的 CSS 代码如下：

/* 查看更多 */
.ui.post.list.seemore {
    color: rgb(235, 165, 101);
    border:rgb(235, 165, 101) solid 1.5px;
    border-radius: 2px;
    width: fit-content;
    padding: 6px 6px;
    margin-right: 40px;
    margin-left: auto !important;
    margin-bottom: 40px;
}
/* 选中变色动画 */
@keyframes seemorecolor {
    from {
        backgound-color: rgb(255, 255, 255);
        color: rgb(235, 165, 101);
    }
    to {
        color: rgb(255, 255, 255);
        background-color: rgb(235, 165, 101);
    }
}
.ui.post.list.seemore:hover {
    animation: seemorecolor 150ms;
    color: rgb(255, 255, 255);
    background-color: rgb(235, 165, 101);
}

现在我已经实现了鼠标覆盖后动画变色。

我的目的是实现 鼠标取消覆盖 后也能动画变色。

是否有可行方法？纯 CSS 优先。谢。