共计 919 个字符，预计需要花费 3 分钟才能阅读完成。
明天做了一个需要，头像旋转，用了 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) 加上，这个问题搞了快两个小时。应该是我的代码不标准导致的。把这个问题贴出来，心愿敌人不要遇到我这个谬误。
正文完
