我已经使用关键帧为HTML/CSS3创建了动画。
动画是一个图标,该图标应该围绕其中心点旋转和缩放。
该动画可在Chrome中运行,但在Safari中,直到动画结束,它才能正确转换。
这是-定位到 safari 中的位置:
这是-平滑动画到位置-在 chrome 中:
这是动画CSS:
@keyframes icon-animation {
0% {
left: 188.5px;
top: 187.5px;
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: 50% 50%;
width: 286.84px;
height: 233.81px;
}
16.6667% {
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: 50% 50%;
}
50% {
left: 188px;
top: 188.5px;
}
66.6667% {
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: 50% 50%;
width: 200px;
height: 163px;
}
100% {
left: 188px;
top: 188.5px;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: 50% 50%;
width: 200px;
height: 163px;
}
}
HTML和Default CSS很长,因此我创建了一个Codepen示例,可以在这里找到:
https://codepen.io/traviskirton/pen/NLdKbb
最佳答案
尽管很可能是Safari特有的错误,但我个人不会对静态像素计算+顶部和左侧调整感到困惑。
您在这里所做的基本上是将图像尺寸减小30%。
您可以通过scale
轻松实现相同目的。
简化动画版本,使其也可以在Safari中正常工作。
@keyframes icon-animation {
0% {
transform-origin: 50% 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
100% {
transform-origin: 50% 50%;
transform: translate(-50%, -50%) rotate(0deg) scale(.70);
}
}
如果没有
scale
,则应尝试使用边距,但在Chrome或Firefox中可能会有不良行为。
关于safari - CSS旋转,平移,缩放动画错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52105292/