$filters: (
    saturate: (
        units: '',
        range: (
            min: 1,
            max: 10
        ),
        probability: 1/5
    ),
    hue-rotate: (
        units: 'deg',
        probability: 1,
        range: (
            min: 0,
            max: 360
        ), 
    ),
    invert: (
        units: '',
        probability: 1/30,
        range: (
            min: 1,
            max: 1
        ),
    ),
    contrast: (
        units: '',
        probability: 1/10,
        range: (
            min: 1,
            max: 10
        ),
    ),
    brightness: (
        units: '%',
        probability: 1/20,
        range: (
            min: 25,
            max: 75
        ),
    )
);

html { 
    background-color: black;
    animation: spazz 7s steps(1) infinite;
}

body {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/marilyn.jpg) 50%/cover;
    background-blend-mode: multiply;
    animation: inherit;
    animation-duration: 17s;
}

@keyframes spazz {
    @for $i from 0 through 100 {
        @if(random(100) < 66.6) {
            #{$i}% { 
                $filter_css_value: '';
                @each $filter, $filter_props in $filters {
                    @if((random(100) / 100) < map-get($filter_props, probability)) {
                        $range: map-get($filter_props, range);
                        $min: map-get($range, min);
                        $max: map-get($range, max);
                        $filter_css_value: $filter_css_value + ' #{$filter}(#{random(100) / 100 * ($max - $min) + $min}#{map-get($filter_props, units)})';
                    }
                }
                filter: unquote($filter_css_value);
                background-color: hsl(random(360), 100%, 70%);
                transform: translate(#{random(30) - 15}px, #{random(30) - 15}px) scale(random(20) / 100 + 1.05);
            }
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/noahblon/pen/QYvmQe/caa6efe92005db0a8b9206328253c5cc.js