Make Cinema Grain Effect use CSS3

Berbicara tentang efek di dunia website memang susah habisnya. Selalu saja ada kreasi baru berdatangan dari para master koding! Apakah sobat pernah melihat film televisi jadul dengan gaya warna cuma hitam-putih dan terdapat garis-garis serta runyeum semut menyertai? Dalam dunia CSS hal seperti itu bisa dinamakan dengan CSS Cinema Effect, Film Grain Effect with CSS3 atau yg lain. Gue punya 2 link resource berbicara mengenai hal ini Creating a Film Grain Effect with CSS3 dan Pure CSS Cinema Effect.

Karena kurang kerjaan dan artikel unik lagi susah carinya plus nungguin berbuka puasa menahan lapar & dahaga, AA coba-coba gabungkan saja kode CSS dari kedua resource tersebut ;))
Untuk menerapkan efek cinema film terhadap gambar, sobat harus mempunyai 2 gambar ini terlebih dahulu (Lakukan Save As, lalu hosting masing²):

1. Grain.PNG
2. Scratch.PNG

DEMO

.grain {
width: 400px;
height: 300px;
display: block;
overflow: hidden;
margin: 3em auto;
position: relative;
transition: all 0.5s ease-out 0s;
}
.grain img {
max-width: 400px;
max-height: 300px;
width: 100%;
height: inherit !important;
}
.grain:hover,.grain:hover:after {
transform: scale(1.3);
background: transparent !important;
box-shadow: 0 0 3px #333;
}
.grain > * {
z-index: 2;
}
.grain:after {
background: url("Grain.PNG");
content: "";
left: -100%;
top: -103%;
width: 300%;
height: 300%;
z-index: 1;
display: block;
position: absolute;
animation: grain .5s steps(1) infinite;
-webkit-animation: grain .5s steps(1) infinite;
}
.grain span {
color: #fff;
display: block;
font-family: initial;
letter-spacing: 1px;
line-height: 10px;
position: relative;
text-align: center;
bottom: 25px;
text-align: center;
text-shadow: 0 3px 1px rgba(0, 0, 0, 0.4);
}
.outer-scratch, .inner-scratch {
height: inherit;
}
.outer-scratch:after, .inner-scratch:after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .09;
position: absolute;
padding-left: 100px;
animation: scratch 0.55s steps(1) infinite;
-webkit-animation: scratch 0.55s steps(1) infinite;
background: url("Scratch.PNG") repeat center center;
}
.inner-scratch:after {
left: 30%;
animation: inner-scratch 2s infinite;
-webkit-animation: inner-scratch 2s infinite;
}
@keyframes grain{0%,100%{-moz-transform:translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}10%{-moz-transform:translate(-5%,-10%);-ms-transform:translate(-5%,-10%);-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)}20%{-moz-transform:translate(-15%,5%);-ms-transform:translate(-15%,5%);-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)}30%{-moz-transform:translate(7%,-25%);-ms-transform:translate(7%,-25%);-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)}40%{-moz-transform:translate(-5%,25%);-ms-transform:translate(-5%,25%);-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)}50%{-moz-transform:translate(-15%,10%);-ms-transform:translate(-15%,10%);-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)}60%{-moz-transform:translate(15%,0%);-ms-transform:translate(15%,0%);-webkit-transform:translate(15%,0%);transform:translate(15%,0%)}70%{-moz-transform:translate(0%,15%);-ms-transform:translate(0%,15%);-webkit-transform:translate(0%,15%);transform:translate(0%,15%)}80%{-moz-transform:translate(3%,35%);-ms-transform:translate(3%,35%);-webkit-transform:translate(3%,35%);transform:translate(3%,35%)}90%{-moz-transform:translate(-10%,10%);-ms-transform:translate(-10%,10%);-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)}}
@keyframes scratch{0%,100%{transform:translateX (0);opacity:0.075}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%);opacity:0.09}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.05}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.02}90%{transform:translateX (-2%)}}
@keyframes inner-scratch{0%{transform:translateX (0);opacity:0.08}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%)}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.06}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.03}90%{transform:translateX (20%)}100%{transform:translateX (30%)}}

<div class="grain">
<div class="outer-scratch"><div class="inner-scratch">
<img src="LINK-IMAGE" alt=""/>
  <span>Keterangan or Kata-Kata</span>
</div></div>
</div>

BONUS:
Material Multi-Button Pure CSS - Drop the CAPS! 🎤🎤 - Too many icons... - A Pen by Stefan Göllner - CSS Animation/Transition Demos - Text Shadow Generator - Halftone Newspaper Effect with SVG Filters (Chrome) - pure CSS, 1 element crossbrowser reflection - The Matrix GIF Maker - 3D accordion (simple folding paper effect) - React Markdown Previewer - Form with a bunch of HTML5 Validation and CSS3 Help - jrreeJ reveal navigation - Css3 Transform - Invisible Ink | Mouse Over! iOS 10 - Expounder - Show container height/width using SVG - Social share urls