Filter Experiment #2

html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #222; } .wrapper { height: 350px; img { height: 100%; &.grayscale { -webkit-animation: grayscale 5s linear infinite; animation: grayscale 5s linear infinite; } &.invert { -webkit-animation: invert 6s linear infinite; animation: invert 6s linear infinite; } &.huerotate { -webkit-animation: hue 7s linear infinite; animation: hue 7s linear infinite; } } } @-webkit-keyframes grayscale { 25% { -webkit-filter: grayscale(100%); } 50% { -webkit-filter: grayscale(100%); } } @keyframes grayscale { 25% { -webkit-filter: grayscale(100%); } 50% { -webkit-filter: grayscale(100%); } } @-webkit-keyframes invert { 25% { -webkit-filter: invert(100%); } 50% { -webkit-filter: invert(100%); } } @keyframes invert { 25% { -webkit-filter: invert(100%); } 50% { -webkit-filter: invert(100%); } } @-webkit-keyframes hue { 25% { -webkit-filter: hue-rotate(180deg); } 50% { -webkit-filter: hue-rotate(180deg); } } @keyframes hue { 25% { -webkit-filter: hue-rotate(180deg); } 50% { -webkit-filter: hue-rotate(180deg); } }