@keyframes动画仅在iOS上不起作用

Question

我使用HTML/CSS开发了一个网页，并使用@keyframe为4个文本列表的无限垂直移动设置动画(一次显示一个文本(。该代码适用于所有android设备、Mac和iPad的所有浏览器。但它并不是只适用于iPhone的所有浏览器。我尝试过以下解决方案，但都没有奏效：1.我尝试只使用@keyframe。2.我尝试同时使用@keyframe和@-webkit keyframe。3.我尝试使用@keyframes和@-webkit关键帧，这两个关键帧的动画名称不同。4.我试着用translate3d而不是translateY。

以下是我的关键帧代码：

.mobile.up p {
a{
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
color: #F2F4F6;
font-family: 'Gotham Medium';
border-bottom: 1px solid #F2F4F6;
padding-bottom: 2px;
font-style: normal;
font-size: 12px;
line-height: 200%;
}
transform:translate3d(0, 100%, 0);
// -moz-transform:translate3d(0, 100%, 0);
-webkit-transform:translate3d(0, 100%, 0);
}
.mobile.up p:nth-child(1) {
animation: up-mobile-one 20s ease infinite;
// -moz-animation: up-mobile-one-moz 20s ease infinite;
-webkit-animation: up-mobile-one-webkit 20s ease infinite;
}
.mobile.up p:nth-child(2) {
animation: up-mobile-two 20s ease infinite;
// -moz-animation: up-mobile-two-moz 20s ease infinite;
-webkit-animation: up-mobile-two-webkit 20s ease infinite;
}
.mobile.up p:nth-child(3) {
animation: up-mobile-three 20s ease infinite;
// -moz-animation: up-mobile-three-moz 20s ease infinite;
-webkit-animation: up-mobile-three-webkit 20s ease infinite;
}
.mobile.up p:nth-child(4) {
animation: up-mobile-four 20s ease infinite;
// -moz-animation: up-mobile-four-moz 20s ease infinite;
-webkit-animation: up-mobile-four-webkit 20s ease infinite;
}

/**Keyframes **/
@keyframes up-mobile-one {
0%{
transform:translate3d(0, 100%, 0);
opacity: 1;
}
5% {
transform:translate3d(0, 0, 0);
opacity: 1;
}
25% {
transform:translate3d(0, 0, 0);
opacity: 0;
}
100%{
transform:translate3d(0, 0, 0);
opacity: 0;
}
}
@keyframes up-mobile-two {
0% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
25% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
30%{
transform:translate3d(0, -100%, 0);
opacity: 1;
}
50% {
transform:translate3d(0, -100%, 0);
opacity: 0;
}
100%{
transform:translate3d(0, -100%, 0);
opacity: 0;
}
}
@keyframes up-mobile-three {
0% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
50% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
55% {
transform:translate3d(0, -200%, 0);
opacity: 1;
}
75%{
transform:translate3d(0, -200%, 0);
opacity: 0;
}
100%{
transform:translate3d(0, -200%, 0);
opacity: 0;
}
}
@keyframes up-mobile-four {
0% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
75% {
transform:translate3d(0, 100%, 0);
opacity: 1;
}
80% {
transform:translate3d(0, -300%, 0);
opacity: 1;
}
100%{
transform:translate3d(0, -300%, 0);
opacity: 0;
}
}

/** Webkit Keyframes **/
@-webkit-keyframes up-mobile-one-webkit {
0%{
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
5% {
-webkit-transform:translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform:translate3d(0, 0, 0);
opacity: 0;
}
100%{
-webkit-transform:translate3d(0, 0, 0);
opacity: 0;
}
}
@-webkit-keyframes up-mobile-two-webkit {
0% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
25% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
30%{
-webkit-transform:translate3d(0, -100%, 0);
opacity: 1;
}
50% {
-webkit-transform:translate3d(0, -100%, 0);
opacity: 0;
}
100%{
-webkit-transform:translate3d(0, -100%, 0);
opacity: 0;
}
}
@-webkit-keyframes up-mobile-three-webkit {
0% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
50% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
55% {
-webkit-transform:translate3d(0, -200%, 0);
opacity: 1;
}
75%{
-webkit-transform:translate3d(0, -200%, 0);
opacity: 0;
}
100%{
-webkit-transform:translate3d(0, -200%, 0);
opacity: 0;
}
}
@-webkit-keyframes up-mobile-four-webkit {
0% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
75% {
-webkit-transform:translate3d(0, 100%, 0);
opacity: 1;
}
80% {
-webkit-transform:translate3d(0, -300%, 0);
opacity: 1;
}
100%{
-webkit-transform:translate3d(0, -300%, 0);
opacity: 0;
}
}

Answer 1

在我的动画中添加半秒的延迟使它在iPhone浏览器上正常工作。