css 动画效果和真机差异问题
发布于 5 年前 作者 zhaoxia 6222 次浏览 来自 问答

animation: run 2s infinite linear;

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

animation: run 2s 1 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](/user/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 回复

我来补充啦~

扫描二维码预览，不行！！！

点真机调试测试又可以。

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

回到顶部