乐趣区

关于前端:解决css动画中transform的rotate在苹果浏览器里不生效的问题


明天做了一个需要,头像旋转,用了 css3 的 animate 管制元素旋转。
下面的 gif 右面是谷歌浏览器的的成果,谷歌浏览器是没有问题的。右面的 gif 是苹果浏览器自带的 Safari 浏览器。问题能看出吧,Safari 图片不旋转。
上网上查找起因,有的说在旋转的父元素下面减少 transform: perspective(1000),有的说是没有加兼容前缀(我用的 vue 脚手架,编译后的前缀会本人加上的)都试了,不能够。
上面是我有问题的代码:

 .animation1 {

 animation-duration: 2s;

 animation-fill-mode: both;

 animation-name: animateUp1;

 animation-iteration-count: infinite;

 }

 @keyframes animateUp1 {

 from {transform:scale(0) rotate(0deg);

 }

 50% {transform: scale(1.1) rotate(360deg);

 }

 80% {transform: scale(1);

 }

 to {transform: scale(1.1);

 }

 }

看着也没啥问题,然而就是 Safari 浏览器不失效。
最初应用穷尽法令(还好试出来了):
上面是更改后的代码:

 .animation1 {

 animation-duration: 2s;

 animation-fill-mode: both;

 animation-name: animateUp1;

 animation-iteration-count: infinite;

 }

 @keyframes animateUp1 {

 from {transform:scale(0) rotate(0deg);

 }

 50% {transform: scale(1.1) rotate(360deg);

 }

 80% {transform: scale(1) rotate(360deg);

 }

 to {transform: scale(1.1) rotate(360deg);

 }

 }

能看出问题了吧

在动画的每一个局部都要把 rotate(360deg) 加上,这个问题搞了快两个小时。应该是我的代码不标准导致的。把这个问题贴出来,心愿敌人不要遇到我这个谬误。

退出移动版