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