CSS 动画在 iPad chrome 或 Safari 上不起作用

Question

我有一个简单的CSS动画，在桌面上运行良好，但似乎在iPad上不起作用。我尝试了Chrome和Safari。

这是代码：

.scroll-down img {
    -webkit-animation: 3s ease 0s normal none infinite running myscroll;
    -moz-animation: 3s ease 0s normal none infinite running myscroll;
    animation: 3s ease 0s normal none infinite running myscroll;
}
@-webkit-keyframes myscroll {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(101px);
        transform: translateY(101px);
    }
}

我有某种类型的语法错误吗？

Answer 1

当还使用浏览器一个ex。

时，请始终添加通用 - 不是浏览器特定版本

@-webkit-keyframes myscroll {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(101px);
        transform: translateY(101px);
    }
}
@keyframes myscroll {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(101px);
        transform: translateY(101px);
    }
}

Answer 2

找到了一个解决方案。显然iPad不喜欢速记，所以我必须这样做：

-webkit-animation-name: myscroll;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: none;
-webkit-animation-play-state: running;
animation-name: myscroll;
animation-duration: 3s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;