2

Fiz esse movimento com css e minha dúvida é: Como eu posso parar esse movimento em um determinado lugar?

Eu posso estilizar de acordo com left, right, top etc. Mas como eu consigo parar o movimento do carro de acordo com meu código abaixo:

Obrigado desde já!

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>

1 Resposta 1

3

Você pode utilizar o jQuery, bem simples, da seguinte forma:

No CSS insira uma classe com a propriedade de animação "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;
}

Utilizando o jQuery, coloque a seguinte função no script, que será executa quando ocorrer um clique na div:

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

O toggleClass irá permitir a pausa e a continuidade, pois ele aciona e remove a classe. Se você quiser apenas parar e não continuar mais, coloque somente um addClass, como no exemplo abaixo:

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

Qualquer necessidade avise!! jQuery é um canivete suiço!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .