css3动画旋转不兼容ios

关注

原创最新推荐文章于 2026-07-04 13:31:09 发布 1k 阅读 AI 写同款· GEO 优化 ›

ios下使用动画 transform: translate(xx%) 无效问题 <div class="wg-marquee-up"></div> .wg-marquee-up { height:300px; -webkit-animation: marquee-up 5s linear infinite; -ms-animation: marquee-up 5s linear infinite; -o-animation: marquee-up 5s linear infinite; animation: marq 阅读详情

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啦

收录于