A transition or effect

Question

Would anyone have any idea of some transition or effect of some image arising from left to right in a sense of being passing in a straight line?

Answer 1

An alternative in pure JS. I used setInterval (Continuous timer) which is canceled with clearInterval when the image disappears from the screen. To know when the image disappears from the screen I used offsetLeft which gives me the position of the image from the left of the screen. When the position is greater than the window area (window.innerWidth) I stop the timer setInterval.

In the CSS I set position: fixed not to cause horizontal scroll in the window, and also put left: -200px so that the image is outside the left window, where 200px is the width of the image. top: 20px; is the distance of the image to the top of the window.

In img.offsetLeft+10 the value 10 represents how many pixels the image will run. O 30 on the timer is the time in milliseconds between the timer cycles. The higher this value, the slower the cycle will occur, i.e., the slower the image will move.

document.addEventListener("DOMContentLoaded", function() {
   var img = document.querySelector("#imagem");
   var tempo = setInterval(function(){
      img.offsetLeft > window.innerWidth ?
      clearInterval(tempo)
      : img.style.left = img.offsetLeft+10+"px";
   }, 30);
});

#imagem{
   position: fixed;
   top: 20px;
   left: -200px;
}

<img id="imagem" width="200" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />

Repeat after 10 seconds

Creating a trigger that simulates the event DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() {
   var img = document.querySelector("#imagem");
   var tempo = setInterval(function(){
      if(img.offsetLeft > window.innerWidth){
         clearInterval(tempo);
         setTimeout(function(){
            img.style.left = "-200px";
            var evt = document.createEvent('Event');  
            evt.initEvent('DOMContentLoaded', false, false);  
            document.dispatchEvent(evt);
         }, 10000);
      }else{
         img.style.left = img.offsetLeft+10+"px";
      }
   }, 30);
});

#imagem{
   position: fixed;
   top: 20px;
   left: -200px;
}

<img id="imagem" width="200" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />