关于前端:解决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)加上，这个问题搞了快两个小时。应该是我的代码不标准导致的。把这个问题贴出来，心愿敌人不要遇到我这个谬误。