How can I make an animation of images?

Question

like a rotating coin in games.

Answer 1

Janning⭐

Here's my code!

https://code.sololearn.com/WagSLD0ulKcN/?ref=app

Answer 2

That's really nifty, Mr. Sam! ☺

Keep up the good work! 👍

Answer 3

What kind of animation? You should look up keyframe animations for CSS.

Answer 4

try this
-html-
<div id="imganimation"></div>

-css-
#imganimation{
animation-name:imgs;
animation-duration:10s;
animation-iteration-count:infinite;
background-image("https://img1.png");
}
@keyframes imgs{
0%{background-imagr("https://img1.png");}
10% next img
and so on

Answer 5

Is it possible to use Java script?

Answer 6

Keyframes in CSS is much easier to use than JS, so you should learn it. JS might be useful for some very complex animations though.

In JavaScript you can access the CSS and modify it to animate. No matter what, animations are modifying format and format is CSS.

You might do something like this...

function moveLeft(){
var box = document.getElementById("box");
box.style.left++;
}
setInterval(moveLeft, 10);

Every 10 milliseconds the box element will move one pixel left.

Answer 7

No! By image animation I mean I have a bunch of images and if you put them one after another you get a nice animation. So I need to know how to play them like that.
May be we can use arrys...

Answer 8

Ok, try this.

var images = ["1.png", "2.png", "3.png"];
var x = 0;
function nextImg(){
var img = document.getElementById("img");
img.src = images[x];
x++;
if (x === images.length){
x = 0;
}
}
setInterval(nextImg(), 1000);

Answer 9

sorry your code is not working for me. Can you show the code in action? (by creating a project)

Answer 10

Hi Mr. Sam,

I think James has done plenty of heavy-lifting already. How about you put one of your projects up so we can help troubleshoot your code?

Answer 11

I will definitely post my code after learning php.

Answer 12

Okay. Looking forward. 👍