最近有不少用戶反饋在iOS設備上使用CSS動畫無法正常展現，這讓很多開發者十分苦惱。下面我們來分析一下可能引起這種問題的原因。

/* CSS代碼 */
@keyframes move{
from{ transform: translateX(0);}
to{ transform: translateX(100px);}
}
.box{
animation: move 1s linear;
}

一些開發者可能會在CSS中使用如上所示的代碼來編寫動畫效果，在PC端瀏覽器中也能夠正常展示。但是在iOS設備上卻不生效，這是為什么呢？

原因在于：iOS設備中的Safari瀏覽器不支持動畫的transform屬性和opacity屬性同時使用。因此，我們需要將這兩個屬性分離，如下所示：

.box{
animation: move 1s linear;
}
@keyframes move{
from{
opacity: 1;
}
to{
transform: translateX(100px);
opacity: 0;
}
}

在iOS設備上，我們只需要將transform屬性和opacity屬性分開設置，就可以解決CSS動畫不生效的問題了。當然，在編寫CSS代碼時還需要注意其他諸如瀏覽器兼容性等問題。