公告列表
公告列表
收藏
回答

内嵌在小程序里面的h5项目里面的css3,animation动画在ios真机上看不到动画的旋转效果？

我们项目是内嵌在小程序里面的h5项目，但是最近开发遇到css3的animation动画在ihone手机上面没有动画的旋转效果，安卓手机上面的效果是正常的，请问这是什么问题

回答关注问题邀请回答
收藏

4 个回答

  • 程子汁
    程子汁
    2021-12-27

    解决了吗，我也遇到跟你一样的问题

    2021-12-27
    有用
    回复 2
    • numb
      numb
      2022-06-29
      我没有解决，但是我那个动画不是很复杂，所以我把animation-name的值提前写几个设置好，然后通过js调用不同的animation-name从而实现不同的效果就好了，但是这个问题的原因我也没找到，如果是animation没生效，那么也不会在渐变时间到了之后一瞬间实现效果，我们这个就是过渡时间没生效
      2022-06-29
      赞
      回复
    • numb
      numb
      2023-03-31
      或者你可以在动画外面套一个timeout延时器再执行
      2023-03-31
      赞
      回复
  • Riven.
    Riven.
    2021-12-15

    你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

    2021-12-15
    有用
    回复 3
  • numb
    numb
    2021-12-15

    position: absolute;

                    top: 0.78rem;

                    left: 0.78rem;

                    margin: auto;

                    width: 1.3rem;

                    height: 1.3rem;

                    transform-style: preserve-3d;

                    animation: starrotate 3s ease;

                    -o-animation:starrotate 3s ease;

                    -moz-animation: starrotate 3s ease;

                    -ms-zoom-animation:starrotate 3s ease;

                    -webkit-animation: starrotate 3s ease;

                    animation-iteration-count: infinite;

                    transform: rotateX(10deg) rotateY(95deg);//六点旋转的角度

                    -o-transform: rotateX(10deg) rotateY(95deg);

                    -moz-transform: rotateX(10deg) rotateY(95deg);

                    -webkit-transform: rotateX(10deg) rotateY(95deg);

                    -ms-transform: rotateX(10deg) rotateY(95deg);






    @keyframes starrotate {

                    from {

                        transform: rotateX(60deg) rotateY(-30deg);

                        -o-transform: rotateX(60deg) rotateY(-30deg);

                        -moz-transform: rotateX(60deg) rotateY(-30deg);

                        -webkit-transform: rotateX(60deg) rotateY(-30deg);

                        -ms-transform: rotateX(60deg) rotateY(-30deg);

                    }


                    to {

                        transform: rotateX(470deg) rotateY(400deg);

                        -o-transform: rotateX(470deg) rotateY(400deg);

                        -moz-transform: rotateX(470deg) rotateY(400deg);

                        -webkit-transform: rotateX(470deg) rotateY(400deg);

                        -ms-transform: rotateX(470deg) rotateY(400deg);

                    }

                }

    这是绑定元素的动画代码

    2021-12-15
    有用
    回复
  • 老张
    老张
    2021-12-15

    1、在 iOS手机浏览器上看；

    2、在iOS微信中打开；

    2021-12-15
    有用
    回复 3
    • numb
      numb
      2021-12-15
      就是在ios手机上面的微信里面打开的，没效果
      2021-12-15
      赞
      回复
    • numb
      numb
      2021-12-15回复numb
      发布之后我在微信开发者工具上面打开线上地址看的效果也是正常的，就是在iPhone手机上面没有动画的旋转效果，直接在动画定义的完成时间完成之后显示最后一帧动画，没有中间的动画过程
      2021-12-15
      赞
      回复
    • Autumn
      Autumn
      2022-05-13回复numb
      可以给ios加个0.1s的动画延时试试
      2022-05-13
      赞
      回复
请 登录 后发表内容
相关问题
相关文档