[英]CSS3 Spinning Animation doesn't work on Iphone
Can anybody tell why this CSS3 Animation refuses to work when I test it on my Iphone? 谁能说出为什么我在Iphone上测试此CSS3动画后无法正常工作吗? It works fine on Chrome.
在Chrome上运行正常。
.heartbeat:after {
content: "\f118";
font-family: fontAwesome;
font-size: 50px;
color: rgb(0, 156, 255);
-webkit-animation: spin 1000ms ease 0s infinite normal;
-moz-animation: spin 1000ms ease 0s infinite normal;
-ms-animation: spin 1000ms ease 0s infinite normal;
-o-animation: spin 1000ms ease 0s infinite normal;
animation: spin 1000ms ease 0s infinite normal;
}
@-ms-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
I checked similar questions and tried to replace from
and to
with 0%
and 100%
, and rotate 180 degrees at a time, use rotate3d instead; 我检查了类似的问题,并尝试使用
0%
和100%
来代替from
和to
,并一次旋转180度,而使用rotate3d代替; didnt work. 没有工作。
There is a reason behind this. 这是有原因的。 You have an error here:
您在这里有一个错误:
@-ms-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Notice anything here, for example? 注意这里的任何东西吗?
@-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
You're using a -moz-
keyframe, which is fine, but notice anything else? 您使用的是
-moz-
关键帧,这很好,但是还有其他注意事项吗?
How about the -webkit-
prefix on the transform? 转换中的
-webkit-
前缀如何?
So, in essence, this would become: 因此,从本质上讲,这将变为:
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
Repeat this for your other keyframes and this should sort out a problem or two... 对其他关键帧重复此操作,这应该可以解决一个或两个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.