css3动画旋转不兼容ios

最新推荐文章于 2023-04-23 09:19:56 发布

cv酱

最新推荐文章于 2023-04-23 09:19:56 发布

阅读量844

点赞数

分类专栏：前端文章标签： css3 动画 css

本文链接：https://blog.csdn.net/yinguser/article/details/124811041

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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啦