I have successfully implemented an animation within a div element that is functioning perfectly in the Chrome browser.
Below is the code snippet...
@-webkit-keyframes adjustHue {
0% { -webkit-filter: hue-rotate(0deg); }
25% { -webkit-filter: hue-rotate(45deg); }
50% { -webkit-filter: hue-rotate(90deg); }
75% { -webkit-filter: hue-rotate(135deg); }
100% { -webkit-filter: hue-rotate(180deg); }
}
.blocky {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: adjustHue 4s alternate infinite;
-moz-animation: adjustHue 4s alternate infinite;
-o-animation: adjustHue 4s alternate infinite;
animation: adjustHue 4s alternate infinite;
}
Although I could easily replicate the -webkit-keyframes adjustHue for other browsers like -moz-keyframes adjustHue or simply keyframes adjustHue, I have encountered issues when trying to apply -moz-filter or filter instead of -webkit-filter. My goal is to make this effect work consistently across different web browsers.