A lightweight approach to pausing gifs on a webpage.

pause-gifs.css

/** .pause-gif */

.wrap-pause-gif {
  position: relative;
  text-align: center;
}

.pause-gif {
  visibility: hidden;
}

.pause-gif.processed {
  visibility: visible;
}

.wrap-pause-gif .wrap-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.wrap-pause-gif.show-still .wrap-canvas {
  opacity: 0;
}

.wrap-pause-gif img,
.wrap-pause-gif .wrap-canvas canvas {
  max-width: 100%;
}

pause-gifs.js

window.PauseGifs = function(contextSelector) {
  var d = document;

  // supports checks
  var supports = {
    querySelectorAll: !!d.querySelectorAll,
    canvas: (function() {
      var elem = d.createElement("canvas");
      return !!(elem.getContext && elem.getContext("2d"));
    })(),
    classList: (function() {
      var elem = d.createElement("div");
      return !!elem.classList;
    })()
  };

  // gifs
  if (supports.querySelectorAll && supports.canvas && supports.classList) {
    var query = (contextSelector ? contextSelector + " " : "") + "img.pause-gif";
    var elts = d.querySelectorAll(query);
    var i = elts.length;
    var elt, p;
    while (i > 0) {
      i--;
      elt = elts[i];
      p = elt.parentNode;
      p.classList.add("wrap-pause-gif");
      _asCanvas(elt, _insertCanvas);
    }
  } else {
    try {
      var s = d.createElement("style");
      s.innerHTML = ".pause-gif { visibility: visible; }";
      d.getElementsByTagName("head")[0].appendChild(s);
    } catch (e) {}
  }

  function _insertCanvas(img, canvas) {
    _drawTriangle(canvas);

    var wrap = d.createElement("span");
    wrap.className = "wrap-canvas";
    wrap.appendChild(canvas);
    img.parentNode.appendChild(wrap);

    img.parentNode.addEventListener(
      "click",
      function() {
        this.classList.toggle("show-still");
      },
      false
    );

    img.classList.add("processed");
  }

  function _asCanvas(img, cb) {
    var imgObj = new Image();
    imgObj.src = img.src;
    imgObj.onload = function() {
      var c = d.createElement("canvas");
      c.width = this.width;
      c.height = this.height;
      var ctx = c.getContext("2d");
      ctx.drawImage(img, 0, 0);
      cb(img, c);
    };
  }

  function _drawTriangle(canvas) {
    var w = canvas.width;
    var h = canvas.height;
    var dim = 20;
    dim = Math.min(dim, w / 2 - 5, h / 2 - 5);

    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.fillStyle = "rgba(255, 255, 255, .85)";
    ctx.beginPath();
    ctx.moveTo(w / 2 - dim * 0.7, h / 2 - dim);
    ctx.lineTo(w / 2 - dim * 0.7, h / 2 + dim);
    ctx.lineTo(w / 2 + dim, h / 2);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
};