收藏
回答

css 动画效果和真机差异问题

animation: run 2s infinite linear;

上面这个css 无限循环动画在模拟器、真机(IOS)可以运行

animation: run 21 linear;

上面这个css 循环1次,在模拟器ok,真机(IOS)无反应


目的是实现循环一次后隐藏。


wxml

<view class="intro">欢迎使用代码片段,可在控制台查看代码片段的说明和文档</view>


wxss

.intro {
  margin: 30px;
  text-align: center;

  position: absolute;

  opacity: 0;

  /* animation: run 2s infinite linear; */
  animation: run 2s 1 linear;
}
 
 
@keyframes run {
  0% {
    transform: translateX(-10px);
    opacity: 1;
  }
 
  60% {
    transform: translateX(0);
    opacity: 1;
  }
 
  100% {
    transform: translateX(-10px);
    opacity: 1;
  }
}
 


代码片段

https://developers.weixin.qq.com/s/TztOibmc738K

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

1 个回答

  • 星云创新
    星云创新
    2019-05-07

    我来补充啦~

    扫描二维码预览,不行!!!

    点真机调试测试又可以。


    那问题来了,上传发布程序后是行呢还是不行?

    2019-05-07
    赞同
    回复 6
    • 浮生不歇
      浮生不歇
      2019-05-07

      我手机预览可以...

      2019-05-07
      回复
    • LOOK
      LOOK
      2019-05-07

      可以到体验版试试

      2019-05-07
      回复
    • 星云创新
      星云创新
      2019-05-07回复LOOK

      测试后,不行,一闪而过~

      2019-05-07
      回复
    • 忘记拥抱
      忘记拥抱
      2019-06-10回复星云创新

      请问这个问题有办法解决吗,我是单次动画,没有过程,直接呈现结果

      2019-06-10
      回复
    • 星云创新
      星云创新
      2019-06-11回复忘记拥抱

      没解决,我弄成一直循环了。

      2019-06-11
      回复
    查看更多(1)
登录 后发表内容