Film Grain Simulation - CSS3

HTML

<div class="box noise vignette">
    
    <h1>CSS3 FILM grain simulation</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p><small>* Runs in CSS3 compatible browsers</small></p>
    
    <p><small>* Created by <a href="http://profile.idesigned.cz/marakoss/">Marakoss</a> @ <a href="http://www.idesigned.cz/">Image Design</a></small></p>
    
    <img src="http://publichealth.ro/wp-content/uploads/2013/11/icon_21249.png" width="200" />
    
</div>

CSS

.noise:before{
    background: url();
        
    -moz-animation: bganim 0.2s linear infinite;
    -webkit-animation: bganim 0.2s linear infinite;
    -ms-animation: bganim 0.2s linear infinite;
    -o-animation: bganim 0.2s linear infinite;
    animation: bganim 0.2s linear infinite;
}

.vignette:after {
    -moz-box-shadow: inset 0 0 10em rgba(0,0,0,0.3);  
    -webkit-box-shadow: inset 0 0 10em rgba(0,0,0,0.3);   
    box-shadow: inset 0 0 10em rgba(0,0,0,0.3);
}

.noise:before, .vignette:after{    
    pointer-events: none;

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
}

.vignette:after{
    z-index: -1; /* Push vignette to underlaying layer */
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
    margin:0;
    padding: 0;
    line-height: 1;
}

h1{
    font-size: 70px;
    font-weight: 700;
}

h1, p, a{
    color: #28655a;
}

.noise{
    background: #3ec89e;
    position: relative;
    z-index: 10;
}

p{
    font-weight: 200;
    font-size: 14px;
    line-height: 1.5;
}
.box {
    width: 100%;
    min-width: 320px;
    min-height: 400px;
    padding: 50px 20px;
}

/* Keyframes */
/* TODO: investigate to minify the code */

@keyframes bganim {
    0% { background-position: 0 0; }
    0.1% { background-position: -7px -7px; }
    25% { background-position: -7px -7px; }
    25.1% { background-position: 17px -17px; }
    50% { background-position: 17px -17px; }    
    50.1% { background-position: 5px 5px; }
    75% { background-position: 5px 5px; }
    75.1% { background-position: -3px 3px; }
    100% { background-position: -3px 3px; }
}
@-moz-keyframes bganim {
    0% { background-position: 0 0; }
    0.1% { background-position: -7px -7px; }
    25% { background-position: -7px -7px; }
    25.1% { background-position: 17px -17px; }
    50% { background-position: 17px -17px; }    
    50.1% {...