<button>Click to Animate</button>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
button {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}
img {
display: block;
max-width: 100vw;
max-height: 100vh;
}
img.animated {
animation: filter-animation 5s infinite;
}
@keyframes filter-animation {
0% {
filter: sepia(0) saturate(2);
}
50% {
filter: sepia(1) saturate(8);
}
100% {
filter: sepia(0) saturate(2);
}
}
function activateFilterAnimation() {
$("img").toggleClass("animated");
}
$("button").on("click", activateFilterAnimation);
This Pen doesn't use any external CSS resources.