CSS动画rotate3d在Safari中不起作用 [英] CSS Animation rotate3d not working in Safari
本文介绍了CSS动画rotate3d在Safari中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
无论尝试如何,都无法使此动画在Safari 12中正常工作。我已经尝试了供应商前缀和所有前缀,但无济于事。
I cannot get this animation to work in Safari 12 no matter what I try. I've tried vendor prefixes and all, but nothing works.
在Chrome中工作正常。有人有什么想法吗?
It works fine in Chrome. Anyone have any ideas?
<div class="spinners"></div>
这是CSS:
@keyframes spinx {
0% {
transform: rotate3d(0, 1, 1, 360deg);
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}
.spinners {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
position: relative;
}
.spinners:before, .spinners:after {
content: "";
width: 4rem;
height: 4rem;
border: 3px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -2rem 0 0 -2rem;
display: block;
transform-origin: 50% 50% 0;
}
.spinners:before {
animation: spinx 2s infinite linear;
}
.spinners:after {
border-color: blue;
animation: spinx 4s infinite linear alternate;
}
这是一个演示:
https://codepen.io/Skinner927/pen/vVEdag
推荐答案
似乎Safari和Firefox都无法识别两个关键帧之间的变化。要解决此问题,您可以使用中间关键帧:
Seems like both Safari and Firefox don't recognise the change between the two key frames. To solve this you can use an intermediate keyframe:
50% {
transform: rotate3d(0, 1, 1, 180deg);
}
演示:
@keyframes spinx {
0% {
transform: rotate3d(0, 1, 1, 360deg);
}
50% {
transform: rotate3d(0, 1, 1, 180deg);
}
100% {
transform: rotate3d(0, 0, 0, 0);
}
}
.spinners {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
position: relative;
}
.spinners:before,
.spinners:after {
content: "";
width: 4rem;
height: 4rem;
border: 3px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -2rem 0 0 -2rem;
display: block;
transform-origin: 50% 50% 0;
}
.spinners:before {
animation: spinx 2s infinite linear;
}
.spinners:after {
border-color: blue;
animation: spinx 4s infinite linear alternate;
}
<div class="box">
<div class="spinners"></div>
</div>
这篇关于CSS动画rotate3d在Safari中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文