iPhone 6 手机不兼容 Css3 动画？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3623 天前的主题，其中的信息可能已经有所发展或是发生改变。

animation: spinDisc 3s linear infinite;
-webkit-animation: spinDisc 3s linear infinite;
-ms-animation: spinDisc 3s linear infinite;
-o-animation: spinDisc 3s linear infinite;
-moz-animation: spinDisc 3s linear infinite;
-khtml-animation: spinDisc 3s linear infinite;
@keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}
@-webkit-keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}
@-ms-keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}
@-o-keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}
@-moz-keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}
@-khtml-keyframes spinDisc {
100% {
transform: rotate(1turn);
}
}

手机原带的Safari 和下载的谷歌浏览器都没法执行我写的Css3动画效果.其他安卓手机就可以请大牛分析一下.是不是要什么声明之类的？

spindisc

rotate

1turn

1 条回复 • 2015-01-21 13:27:43 +08:00

nilennoct

2015-01-21 13:27:43 +08:00 via iPad

Valid keyframe lists

In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.