Html 在光标释放时向后播放CSS动画？

从图像中释放光标后，如何向后播放CSS动画？我不希望它跳回正常状态，但我希望它向后播放动画，使其看起来更漂亮

这是我的密码：

#纵向{
显示器：flex；
证明内容：中心；
比例：65%；
}
#肖像：悬停{
动画名称：OnHover；
动画持续时间：1s；
动画填充模式：正向；
}
@悬停关键帧{
从{比例：65%；}
到{比例：75%；}
}

---

如果您只打算使用

变换：缩放

，您只需添加变换即可

#纵向{
显示器：flex；
证明内容：中心；
比例：65%；
转型：转型1秒轻松；
变换：比例（.6）；
}
#肖像：悬停{
变换：比例（.75）；
}
.形象{
背景：红色；
高度：100px；
宽度：100px；
}

#肖像画{
显示器：flex；
证明内容：中心；
}
#img{
动画名称：OnRelease；
动画持续时间：1s；
动画填充模式：正向；
动画计时功能：轻松；
显示器：flex；
证明内容：中心；
比例：65%；
}
#img：悬停{
动画名称：OnHover；
动画持续时间：1s；
动画填充模式：正向；
动画计时功能：轻松；
}
@悬停关键帧{
从{比例：65%；}
到{比例：80%；}
}
@释放关键帧{
从{比例：80%；}
到{比例：65%；}
}

我的第一个答案是垃圾；这个有效，我刚测试过：是的，谢谢！很好用。谢谢。它能用，但有点闪烁。我的结论是制作一个OnRelease动画，它与OnHover相反，我将它设置为#肖像，效果很好。好的，将你的答案发布给其他用户。

        <div id="portrait">
            <img id="img" src="/assets/portait.png" alt="Portrait">
        </div>   



#portrait {
        display: flex;
        justify-content: center;
    }

#img {
    animation-name: OnRelease;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    display: flex;
    justify-content: center;
    scale: 65%;
}

#img:hover {
    animation-name: OnHover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

@keyframes OnHover {
    from {scale: 65%;}
    to {scale: 80%;}
}

@keyframes OnRelease {
    from {scale: 80%;}
    to {scale: 65%;}
}