My CSS3 animation doesn't seem to be working in Chrome . I have other animations which are working on my page. Is there anything I'm missing or such? Here is my code:
@keyframes upToDown {
0% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
@-webkit-keyframes upToDown {
0% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
@keyframes downToUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}
@-webkit-keyframes downToUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}
.hide{
animation: upToDown 1s forwards;
-webkit-animation: upToDown 1s forwards;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.visible{
animation: downToUp 1s forwards;
-webkit-animation: downToUp 1s forwards;
-webkit-transform: translateY(0);
transform: translateY(0);
}
It isn't working because you need -webkit-transform
eg:
@-webkit-keyframes downToUp {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(0); }
}
and
@-webkit-keyframes upToDown {
0% { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(100%); }
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.