How to animate an image?

Question

How to animate an image?

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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:

javascript html css

asked by Eduardo Sebastian 13.09.2017 в 02:43

source

2 answers

Use more than one constructor in a class? Node - console.log (req.body) -undefined

score 2 · Answer 1

#imagen{
  animation-duration: 1s;
  animation-delay: 0s;
  animation-name: sBote;
  animation-iteration-count: infinite;
}

@keyframes sBote{
  from{
    margin-top: 0px;
  }
  to{
    margin-top: 100px;
  }
}

<img id="imagen" src="http://depng.com/wp-content/uploads/2017/04/Abajo-5.png" width="100" />

.

score 0 · Answer 2

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

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


setInterval(function(){
  div.innerHTML==='imagen'? div.innerHTML='flecha':div.innerHTML='imagen';
}, 500);

<div id='node'>imagen Flecha</div>