#home_projects {background-color: #000; position: relative}

#home_projects_x:before {
    animation: grain 6s steps(10) infinite;
    background-image: url("../img/bg_grain.png");
    background-repeat: repeat;
    content: '';
    height: 300%;
    left: -100%;
    opacity: 0.06;
    pointer-events: none;
    position: fixed;
    top: -100%;
    transition: opacity 0.4s ease;
    width: 300%;
    will-change: transform;
    z-index: 3
}


@keyframes grain {
    0% {
        transform: translate(20%, -15%)
    }

    10% {
        transform: translate(-20%, -15%)
    }

    20% {
        transform: translate(20%, -5%)
    }

    30% {
        transform: translate(-20%, -5%)
    }

    40% {
        transform: translate(20%, 5%)
    }

    50% {
        transform: translate(-20%, 5%)
    }

    60% {
        transform: translate(20%, 15%)
    }

    70% {
        transform: translate(-20%, 15%)
    }

    80% {
        transform: translate(20%, 5%)
    }

    90% {
        transform: translate(-20%, 5%)
    }

    100% {
        transform: translate(20%, -5%)
    }
}