DEV Community

davidka7
davidka7

Posted on

gifs running in your DOM

I guess a lot of people don't expect that for moving objects you can just make it into a gif format, and add it in, but if you also want to make its background transparent in whatever game, movie, program, you'll have to find a program to change the background of each individual frame of the gif. But an easier way to do it, is just upload each frame individually customized and having it put together on the screen, you would typically be using this formula.

@keyframes pics
{ 0% { content: url(img1.png); }
25% { content: url(img2.png); }
50% { content: url(img3.png); }
75% { content: url(img4.png); }
100% { content: url(img5.png); }
}

.bar {
animation-name: pics;
animation-duration: 6s;
animation-iteration-count: infinite;
max-height: 100px;
max-width: 60px;
}

//And then calling it in the html

<
img
class="bar" />

though not all browsers support this animation creation in css,
for the most part it should do the work, otherwise you can just insert your original gif in the format of
<
img
src=”img.gif”
alt=”animated” />
that should do the work.

Top comments (0)