Home › Forums › CSS › CSS keyframe animation not working in Chrome › Reply To: CSS keyframe animation not working in Chrome
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%);}
}