Stop motion with css Animation

Question

I made this move with css and my question is: How can I stop this movement in a certain place?

I can style according to left, right, top etc. But how can I stop the car movement according to my code below:

Thanks in advance!

CSS:

<style>
    .box{
        content: "";
        position: absolute;
        z-index: 9999;
        left: -40%;
        animation: bgc 20000ms linear infinite;
    }
    @keyframes bgc {
        0% {left: 140%}
    }
           
    </style>
    

HTML:

<div id="carligue" class="box">
<img style="max-width: 330px !important;" src="https://img2.gratispng.com/20181118/kjz/kisspng-maserati-levante-sports-car-luxury-vehicle-sports-car-images-png-4k-pictures-4k-pictures-5bf15dec03bd89.3228052315425448760153.jpg" >
</div>

Answer 1

You can use jQuery, very simple, as follows:

In CSS insert a class with the animation property "paused":

.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}

Using jQuery, put the following function in the script, which will be executed when a div click occurs:

$("#carligue").click(function(e){ 
  $(e.currentTarget).toggleClass("paused"); 
});

ToggleClass will allow pause and continuity as it triggers and removes the class. If you just want to stop and no longer continue, put only one addClass, as in the example below:

$("#carligue").click(function(e){ 
  $(e.currentTarget).addClass("paused"); 
});

Any need warn!! jQuery is a Swiss Army knife!