我的CSS動畫未在iOS的

Question

工作，請看看http://facelesstolegendary.com

我看了幾個帖子在這裏，看到我需要的-webkit-前綴添加到我的變換等

我這樣做，但它仍然不適用於iOS。它確實在我的桌面瀏覽器上工作。

下面是相關代碼：

.cb-slideshow, 
 
.cb-slideshow:after { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 0; 
 
} 
 
.cb-slideshow:after { 
 
    content: ''; 
 
    background: transparent url(pattern.png) repeat top left; 
 
} 
 

 
.cb-slideshow li span { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    color: transparent; 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    background-repeat: none; 
 
    opacity: 0; 
 
    -webkit-opacity: 0; 
 
    z-index: 0; 
 
    animation: imageAnimation 36s linear infinite 0s; 
 
    -webkit-animation: imageAnimation 36s linear infinite 0s; 
 
} 
 

 
.cb-slideshow li div { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 0px; 
 
    width: 100%; 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-opacity: 0; 
 
    color: #fff; 
 
    animation: titleAnimation 36s linear infinite 0s; 
 
    -webkit-animation: titleAnimation 36s linear infinite 0s; 
 
} 
 
.cb-slideshow li div h3 { 
 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
 
    font-size: 240px; 
 
    padding: 0; 
 
    line-height: 200px; 
 
} 
 

 
.cb-slideshow li:nth-child(1) span { 
 
    background-image: url(faceless.jpg) 
 
} 
 
.cb-slideshow li:nth-child(2) span { 
 
    background-image: url(legendary.jpg); 
 
    animation-delay: 6s; 
 
    -webkit-animation-delay: 6s; 
 
} 
 
.cb-slideshow li:nth-child(3) span { 
 
    background-image: url(faceless.jpg); 
 
    animation-delay: 12s; 
 
    -webkit-animation-delay: 12s; 
 
} 
 
.cb-slideshow li:nth-child(4) span { 
 
    background-image: url(legendary.jpg); 
 
    animation-delay: 18s; 
 
    -webkit-animation-delay: 18s; 
 
} 
 
.cb-slideshow li:nth-child(5) span { 
 
    background-image: url(faceless.jpg); 
 
    animation-delay: 24s; 
 
    -webkit-animation-delay: 24s; 
 
} 
 
.cb-slideshow li:nth-child(6) span { 
 
    background-image: url(legendary.jpg); 
 
    animation-delay: 30s; 
 
    -webkit-animation-delay: 30s; 
 
} 
 

 
.cb-slideshow li:nth-child(2) div { 
 
    animation-delay: 6s; 
 
    -webkit-animation-delay: 6s; 
 
} 
 
.cb-slideshow li:nth-child(3) div { 
 
    animation-delay: 12s; 
 
    -webkit-animation-delay: 12s; 
 
} 
 
.cb-slideshow li:nth-child(4) div { 
 
    animation-delay: 18s; 
 
    -webkit-animation-delay: 18s; 
 
} 
 
.cb-slideshow li:nth-child(5) div { 
 
    animation-delay: 24s; 
 
    -webkit-animation-delay: 24s; 
 
} 
 
.cb-slideshow li:nth-child(6) div { 
 
    animation-delay: 30s; 
 
    -webkit-animation-delay: 30s; 
 
} 
 

 
.no-cssanimations .cb-slideshow li span{ 
 
\t opacity: 1; 
 
\t -webkit-opacity: 1; 
 
} 
 

 
@media screen and (max-width: 1140px) { 
 
    .cb-slideshow li div h3 { font-size: 140px } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .cb-slideshow li div h3 { font-size: 80px } 
 
} 
 

 
@keyframes imageAnimation { 
 
\t 0% { 
 
\t  opacity: 0; 
 
\t  -webkit-opacity: 0; 
 
\t  animation-timing-function: ease-in; 
 
\t  -webkit-animation-timing-function: ease-in; 
 
\t } 
 
\t 8% { 
 
\t  opacity: 1; 
 
\t  -webkit-opacity: 1; 
 
\t  transform: scale(1.05); 
 
\t  -webkit-transform: scale(1.05); 
 
\t  animation-timing-function: ease-out; 
 
\t  -webkit-animation-timing-function: ease-out; 
 
\t } 
 
\t 17% { 
 
\t  opacity: 1; 
 
\t  -webkit-opacity: 1; 
 
\t  transform: scale(1.1) rotate(3deg); 
 
\t  -webkit-transform: scale(1.1) rotate(3deg); 
 
\t } 
 
\t 25% { 
 
\t  opacity: 0; 
 
\t  -webkit-opacity: 0; 
 
\t  transform: scale(1.1) rotate(3deg); 
 
\t  -webkit-transform: scale(1.1) rotate(3deg); 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 0 
 
\t \t -webkit-opacity: 0 
 
\t } 
 
}

<ul class="cb-slideshow"> 
 
    <li> 
 
     <span>Image 01</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <span>Image 02</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <span>Image 03</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <span>Image 04</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <span>Image 05</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <span>Image 06</span> 
 
     <div> 
 
     </div> 
 
    </li> 
 
</ul>

Answer 1

您需要前綴您@keyframes與-webkit-，並且包括-webkit-前綴的動畫和過渡那裏，而不是包括他們在原來的@keyframes：

@keyframes imageAnimation { 
    0% { 
     opacity: 0; 
     -webkit-opacity: 0; 
     animation-timing-function: ease-in; 
     -webkit-animation-timing-function: ease-in; 
    } 

變成：

@keyframes imageAnimation { 
    0% { 
     opacity: 0; 
     animation-timing-function: ease-in; 
    } 

@-webkit-keyframes imageAnimation { 
    0% { 
     -webkit-opacity: 0; 
     -webkit-animation-timing-function: ease-in; 
    } 

等等。