css3，animate动画在iphone7上的问题...很迷...

元旦前给公司做了一个类似支付宝账单一样的参会历程，经过设计和文案方的各种奇思妙想，要求了一堆的特效。

比如：春天要体现出叶子生长，所以我就做了一个由下而上的叶子渐出的效果，并使用animate-delay来提现“生长”的一个感觉。

因为上面分成7团叶子出来，一个一个写css不免有些麻烦

我就写了个js给他算延迟时间，赋值给animate-delay,还有-webkit-animate-delay;

以及下面的文字出场也是用这个delay方法做的。

---

好了，交完项目，我以为万事大吉了，可以欢呼雀跃了，我可以放假过元旦了，耶。

然鹅，文案部一个小姑娘拿着她的iphone7说，我这怎么乱了，字叠在一起了，怎么没有一个一个出来......

我懵逼了，赶紧让大家各种不同类型的手机都测了一下，连iphone5都拿出来了。

也就是奇了怪了（至今不知道为什么）

版本号紧跟潮流，是最新的，同我的7P一样

仅仅是iphone7出现了问题。（公司里同iphone7的也是动画错乱，不生效）（我真的很想求求他们换手机：~）

查了各大网站，全都没有这个问题的出现，郁闷了很久很久很久.......

(领导体恤，让我先放假，项目还有很多内容需要调整)

---

重要发现：

1.js添加的css('-webkit-animate-delay','2s')；在前台没有显示。也就是加不上。

2.分开书写的，animate-delay和-webkit-animate-delay，浏览器居然只识别不带前缀的样式，这样iphone上确实可能存在问题

3.查询有其他部分animate动画连写的样式，在iphone7展示是没有问题的。

 

解决办法：

1.动画能连写的就连写

2.需要延迟出现的，要么你css一个一个写，但有些内容不确定的情况，这样并不明智。建议js使用定时器来做。

 

结果：

结果就是很完美，没有问题，成功上线。液(＾－＾)V 

---

补充：具体造成的原因我确实还不知晓，如有哪位大神了解过，还望告知，谢谢  ：~） ！

---