How to animate an image?


How can I animate an image, I have an arrow in png , and I would like to animate it with css3 or javascript , I am studying transitions, transformations, etc, but I still do not know how. It occurs to me to do it with javascript , with a for cycle changing its position, but this ciclo for would restart every so often so that the arrow will not stop moving and that would be a lot of expense of memory , then how should I do it ?

Something like this:

asked by Eduardo Sebastian 13.09.2017 в 02:43

2 answers


  animation-duration: 1s;
  animation-delay: 0s;
  animation-name: sBote;
  animation-iteration-count: infinite;

@keyframes sBote{
    margin-top: 0px;
    margin-top: 100px;
<img id="imagen" src="" width="100" />


answered by 13.09.2017 в 03:09

One option would be to use setInterval to be an infinite cycle

var div = document.getElementById('node');

  div.innerHTML==='imagen'? div.innerHTML='flecha':div.innerHTML='imagen';
}, 500);
<div id='node'>imagen Flecha</div>
answered by 13.09.2017 в 03:58