1、定义动画,不仅写上前缀,还要加上初始状态
@keyframes rotateLeft{
0%{
transform: translateY(-100%) rotateZ(0deg);
-moz-transform: translateY(-100%) rotateZ(0deg);
-o-transform: translateY(-100%) rotateZ(0deg);
-webkit-transform: translateY(-100%) rotateZ(0deg)
}
100%{
transform: translateY(0%) rotateZ(720deg);
-moz-transform: translateY(0%) rotateZ(720deg);
-o-transform: translateY(0%) rotateZ(720deg);
-webkit-transform: translateY(0%) rotateZ(720deg);
}
2、使用动画的时候也加上初始值
> div {
width: 65px;
height: 110px;
opacity: 0;
margin: 0 5px;
&.rotateTwo{
opacity: 1;
-webkit-transform: translateY(-100%) rotateZ(0deg);
animation:rotateLeft 3s;
-moz-animation:rotateLeft 3s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
这样就兼容ios啦