css3动画旋转不兼容ios

1、定义动画，不仅写上前缀，还要加上初始状态@keyframes rotateLeft{0%{transform: translateY(-100%) rotateZ(0deg);-moz-transform: translateY(-100%) rotateZ(0deg);-o-transform: translateY(-100%) rotateZ(0deg);-webkit-transfor

YingUser

742人浏览 · 2022-05-17 00:02:33

YingUser · 2022-05-17 00:02:33 发布

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啦