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

总是在使用浏览器时添加通用 - 而不是浏览器特定版本的css。

@-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;

CSS动画不适用于iPad chrome或safari

2 个答案: