Edit in JSFiddle

img {
    filter: blur(0) brightness(1);
    -webkit-filter: blur(0) brightness(1);
    animation: an 2.1s infinite;
    -webkit-animation: an 2.1s infinite;
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes an {
    50% {
        filter: blur(0) brightness(1);
    }
    20%, 60% {
        filter: blur(1px) brightness(1);
    }
    0%, 100% {
        filter: blur(5px) brightness(0);
    }
}

@-webkit-keyframes an {
    50% {
        -webkit-filter: blur(0) brightness(1);
    }
    20%, 60% {
        -webkit-filter: blur(1px) brightness(1);
    }
    0%, 100% {
        -webkit-filter: blur(5px) brightness(0);
    }
}
var img = new Image();

// This ensures the GIF and CSS animation are in sync
img.onload = function() {
    console.log('loaded');
    img.style.setProperty('animation-play-state', 'running');
    img.style.setProperty('-webkit-animation-play-state', 'running');
}

img.src = "http://theread.me/img/dev.gif";
document.body.appendChild(img);