解决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)加上，这个问题搞了快两个小时。应该是我的代码不规范导致的。把这个问题贴出来，希望朋友不要遇到我这个错误。