Question

CSS3动画如何设置滑动到当屏的时候才触发动画播放

http://115.28.58.47/7e/seasonfair/plugin/92/index.html?p=2

如上面的例子（请用手机打开或者用chrome手机模拟器打开），当用手指向右滑动到下一页的时候，下一页会有相应的动画出现，我要问的是“如何设置来触发这个动画播放”。

我现在做出来的效果是实现了动画的效果，但在第一页的时候就已经把后面的所有的动画都同时播放了，等于是后面的动画都没有了。我要解决在第一页的时候只播放第一页的动画，第二页及后面的动画是出于初始阶段不播放动画，等我滑动到第二页的时候才开始播放第二页的动画，第三页及后面的动画播放，以此类推。请高手赐教。

• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏20（财富值+成长值）

Answer 1

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00;}
25% {box-shadow: 0px 0px 8px #f00;}
50% {box-shadow: 0px 0px 0px #f00;}
100% {box-shadow: 0px 0px 8px #f00;}
}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {
-webkit-animation:tips 1s;
-moz-animation:tips 1s ;
}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

追问

对JS不太熟悉，还是没弄懂，大侠能帮人帮到底吗？加我QQ：273387276 发文件给你帮我弄一下？

这要求是有点过分，但实在找不到办法，老板在往死力摧要弄出来，被逼疯了

追答

这不是已经把文件发在这里了吗？

直接用就行了。。。。