play gif once


I want to put a gif which should only be played once and be paused in the last frame. Currently in the html I have this:

<div class="img"></div>

and in the css I have this:

     background-image: url(image/login.gif);
     height: 33px;
     width: 204px;  

So, can you make it play once and be paused in the last frame with css or do you have to do it with jquery / javascript?

asked by Fernando Azarías 29.06.2017 в 15:56

1 answer


In principle this can not be done because it is normally done is edit the GIF, you have two one with repetition and one without it, when you are interested with JS you change one for another.

Anyway you have libraries like

  • link = > Prevents gif autoplay

Or in stackoverflow English version this script was published


function is_gif_image(i) {
    return /^(?!data:).*\.gif/i.test(i.src);

function freeze_gif(i) {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(, a.value);
        i.parentNode.replaceChild(c, i);

Origin of the information in the thread: link

answered by 30.06.2017 в 08:39