Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS keyframe animation not working in Chrome Reply To: CSS keyframe animation not working in Chrome

#252796
greeh house
Participant

Hi Paulie,

I added the HTML, CSS, and JS. This is the CSS I’m looking to troubleshoot:

.caption-wrapper {
-webkit-animation: slidein 9s;
-moz-animation: slidein 9s;
-ms-animation: slidein 9s;
-o-animation: slidein 9s;
animation: slidein 9s;
}
@-moz-keyframes slidein {
0% {position: relative;top: 50%;transform: translateY(0%);}
10% {position: relative;top: 100%;transform: translateY(50%);}
100% {position: relative;top: 100%;transform: translateY(50%);}
}
@-webkit-keyframes slidein {
0% {position: relative;top: 50%;transform: translateY(0%);}
10% {position: relative;top: 100%;transform: translateY(50%);}
100% {position: relative;top: 100%;transform: translateY(50%);}
}
@-o-keyframes slidein {
0% {position: relative;top: 50%;transform: translateY(0%);}
10% {position: relative;top: 100%;transform: translateY(50%);}
100% {position: relative;top: 100%;transform: translateY(50%);}
}
@-ms-keyframes slidein {
0% {position: relative;top: 50%;transform: translateY(0%);}
10% {position: relative;top: 100%;transform: translateY(50%);}
100% {position: relative;top: 100%;transform: translateY(50%);}
}
@keyframes slidein {
0% {position: relative;top: 50%;transform: translateY(0%);}
10% {position: relative;top: 100%;transform: translateY(50%);}
100% {position: relative;top: 100%;transform: translateY(50%);}
}