Tell me how to implement the following I have a block that I shift to -405px on the hover. How to make it so that after the animation is executed, the block remains shifted to the same -405px

.seminar-info:hover { animation-duration: 3s; animation-name: seminar-info; } @keyframes seminar-info { from { left: 0px; } to { left: -405px; animation-fill-mode: forwards; }

    1 answer 1

    Since the animation in your code is applied only when hovering, declaratively using CSS you can not leave the block in the final position of the animation, which means you will need JS. Well, since you will use JS, it is better to transfer control of the animation right there completely. You can, for example, write animation data to the date attribute and start it via mouseover

     document.querySelector('.block').onmouseover = function() { let x = +(this.dataset.movex); this.style.transform = 'translateX(' + x + 'px)'; } 
     .block { border: 1px solid; width: 100px; height: 100px; transition: .5s transform; } 
     <div class=block data-movex=100></div>