animation动画不生效_css animation不动怎么办

具体问题：

手机上的css3动画为什么不动？

商城承诺符合以下情况，自客户收到商品之日起7日内可以无理由退货，15日内因质量问题可以换货，客户可在线提交返修申请办理退换货事宜。具体退换货标准如下

以下是css3:

.ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%;

animation:ih 2s;

}

@-webkit-keyframes ih {

0% {opacity: 0;-webkit-transform: translate(-40px,0px);}

100% {opacity: 0;-webkit-transform: translate(0px,0px);}

}

@-moz-keyframes ih {

0% {opacity: 0;-moz-transform: translate(-40px,0px);}

100% {opacity: 0;-moz-transform: translate(0px,0px);}

}

@-ms-keyframes ih {

0% {opacity: 0;-ms-transform: translate(-40px,0px);}

100% {opacity: 0;-ms-transform: translate(0px,0px);}

}

@-o-keyframes ih {

0% {opacity: 0;-o-transform: translate(-40px,10px);}

100% {opacity: 0;-o-transform: translate(0px,0px);}

}

@keyframes ih {

0% {opacity: 0;transform: translate(-40px,0px);}

100% {opacity: 0;transform: translate(0px,0px);}

}

解决办法：

这个问题应该是css兼容性问题导致的。

目前绝大部分移动浏览器还不支持animation这个属性，而是支持-webkit-animation(这类加前缀的)属性，在问题中：

.ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%;

animation:ih 2s;

}

只设置了，animation: ih 2s; 而没有写兼容的 -webkit-animation: ih 2s;所以动画在移动浏览器中就不动了。你可以试下将上面代码改为：

.ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%;

-webkit-animation:ih 2s;

-moz-animation:ih 2s;

-ms-animation:ih 2s;

-o-animation:ih 2s;

animation:ih 2s;

}

animation动画不生效_css animation不动怎么办相关推荐

animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！
CSS3的animation实在是让人爱不释手,越用越觉得离不开了.较高的性能以及和js的逻辑无关性,可以专注于动画效果本身,真的很不错,尤其在手机上,只需主要考虑webkit内核的,更是爽,但随着使 ...
animation动画不生效_SwiftUI动画(1)之Animatable
相信大家都已经对SwiftUI有了基本的了解,在SwiftUI写动画,相对来说变得更加简单了,接下来,会用3篇文章,带领大家一览SwiftUI动画的魅力. 1. 显式和隐式动画在SwiftUI中有两 ...
jQuery源码解析（5）—— Animation动画
闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...
【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
【Android 基础】Animation 动画介绍和实现（转载）
最近做了下这方面的研究,在博客园上找到了一片很好很详细的文章,于是转了一下.原地址是http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Anima ...
Animation动画相关
本文出自http://wangstar.javaeye.com/blog/409115,感觉基础知识归纳得不错,就COPY下来方便查找. 动画效果编程基础--Android Animation ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
unity3d Animation 动画系统
我使用unity3d的 Animation 系统也有一段时间了 ,Animation 系统总的来说比较简单,我个人觉得比较复杂的情况就是比如我打cs的时候,拿着重型狙击,在跑步,突然发现敌人,这时候 ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...

animation动画不生效_css animation不动怎么办

animation动画不生效_css animation不动怎么办相关推荐

最新文章

热门文章