CSS - 移除悬停时返回初始状态

Question

我正在尝试理解CSS中的动画，还没有JavaScript，因为我想习惯CSS，并且我设法制作了一个动画，可以从堆叠的照片中移动照片并将其放在堆叠的照片上方。我设法制作了动画，但是当我从 img 上移开鼠标时，它不会执行返回动画。

`#background-image-item-1
{
    transform: rotate(-25deg);
    position: relative;
    inset: auto 120px auto auto;
    transition: 1s;

    img
    {
        border-radius: 20px;
        width: 400px;
    }

    &:hover
    {
        animation-duration: 1.5s;
        animation-name: slidein;
        animation-fill-mode: forwards;
    }

    &:hover::after
    {
        animation-duration: 1.5s;
        animation-name: slidein;
        animation-fill-mode: forwards;
    }
}

@keyframes slidein 
{
    50%
    {
        transform: rotate(0deg) translateX(-220px);
    }

    90%
    {
        z-index: 1;
    }

    100%
    {
        transform: scale(1.2) translateX(0);
        z-index: 1;
    }
}`

我尝试了动画方向：反向但它不起作用。不用JS可以实现这个功能吗？谢谢！