safari 下旋转动画的迷之 bug

前几天在写一个活动页的时候发现一个你一样问题,先还原一下现场

页面中有一个地方要做一个一直旋转的动画,类似转盘的效果,很简单是不是?是的!

.rotate{
    animation: rotate 1s linear infinite;
}


@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,360deg) }
}

简洁明了,有木有,还带 3D 加速,完美是不是?
然而。。。
为什么 safari 下并不动。。。。 = =!,老夫可是最新的 safari 9.1.1 呀!

额,这就尴尬了~

请教一下同事,然后试着改成了这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后,诶~ 转了!
等等!!! 为什么转的姿势这么奇怪!
你知道来回摇头是什么姿势么?没错!就是这样!转到 180 度的时候,它又返回去了!!!
你怎么还来回的转呢?!!!

看来这样子不行!
再换一个姿势试一下,google 一下,有人说是开始和结束的位置是一样的(毕竟转了 360 度嘛),所以 safari 会以为没有动,所以就不转了。

好吧,那我们换成不一样的试试

@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,359deg) }
}

改成 359 度呢?

答案是: 还 TM 不行!!!

WTF!!!

然后,还有人给出答案说,再多加几个关键帧,因为加了 50% 的时候它确实转了,不过转的后半段的姿势不是我们想要的,那我们如果把它加一个关键帧,是不是就不会再转回去了呢?

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    75%  { transform: rotate3d(0,0,1,270deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后你会发现,它转起来,还是那么奇怪!!!
呵呵呵呵呵呵呵呵呵呵。。。。。。

然后,老夫又试了几种办法,最终发现有两种方法可以正常转动

一种就是不用 3D 加速,直接变成这样

@keyframes rotate{
    from{ transform: rotate(0deg) }
    to{ transform: rotate(360deg) }
}

呵呵,这样竟然。。。。。

但是我知道有些强迫症肯定还是要用 3D 加速,那么,你可以试试这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    25%  { transform: rotate3d(0,0,1,90deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

是的!就是这么奇葩!加上一个 25% 的关键帧,它喵的就正常了?!!!

至于具体是设么原因造成的,额。。。。 我真的没查到 QAQ~
我猜是 safari 的 bug 吧。。。

如果有知道的朋友,希望能留言告诉我一下,多谢了~

OK,今天就先这样吧! 好想吸毒~ QAQ

标签: animation, rotate3d, safari

已有 2 条评论

  1. icon_rolleyes.gif
    可以,这很迷の bug

  2. 3123 3123

    icon_exclaim.gif icon_evil.gif icon_razz.gif icon_cry.gif icon_mrgreen.gif

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif