This is a duplicate warning, my apologies for that.
After reading several similar posts and attempting various solutions, I am still unable to get it to work.
I have a very basic animation that involves hiding, showing, and image.
#top_heading .chmurka2{
position:absolute;
top:0;
left:257px;
-webkit-animation: top_chmurka2 8s 1s infinite alternate;
-moz-animation: top_chmurka2 8s 1s infinite alternate;
-ms-animation: top_chmurka2 8s 1s infinite alternate;
-o-animation: top_chmurka2 8s 1s infinite alternate;
animation: top_chmurka2 8s 1s infinite alternate;
}
@-webkit-keyframes top_chmurka2 { /*chrome and safari*/
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes top_chmurka2{ /*mozilla*/
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes top_chmurka2{ /*before IE 10*/
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes top_chmurka2{ /*IE9+, Opera*/
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@keyframes top_chmurka2 { /*standard*/
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
The animation functions correctly on all major browsers except Chrome, even when using -webkit-. Can someone explain why this might be happening? (I also attempted including -webkit- within the keyframes rules, but that did not resolve the issue either)