How to fix css animation?

Question

css

Good day, there is an image that should leave the left block and be fixed!
I know how to do this in CSS when hovering over a block, but how to make it so that when I hover over that block, the animation leaves and is fixed permanently! So that when you remove the mouse, does it stay there?
---

<style>
.section1 .section1-img{
position: absolute;
    top: 40px;
    left: -500px;
    transition: 1s;
}
.section1:hover .section1-img{

    transition: 1.3s;
    left: 0;
}

</style>

Answer 1

Actually, animations have such a useful feature as animation-fill-mode . Should help.