page 28
CSS filter: hue-rotate

An effort to get the trippy colour changes going with CSS animation.

filter: hue-rotate(720deg)

HOVER OVER AN IMAGE TO PAUSE IT'S ANIMATION.

goose 1
goose 2
goose 3

Here is the animation used:

@keyframes colourchange {
0% {
    filter: saturate(1) hue-rotate(0deg) invert(0.0);
    }
    30% {
    filter: saturate(1) hue-rotate(0deg) invert(0.0);
    }
    60% {
    filter: saturate(3) hue-rotate(0deg) invert(1);
    }
    100% {
    filter: saturate(2) hue-rotate(720deg) invert(0.1);
    }
}