这个得结合js来做的。比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class

<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
//引入jQuery.js
<script>
var t1=$("#a1").offset().top;
var t1=$("#a2").offset().top;
var t1=$("#a3").offset().top;
$(window).scroll(function(){
var top=$(window).scrollTop();
if(top>t1&&top<t2){
$("#a1").addClass("an1");
}
if(top>t2&&top<t3){
$("#a2").addClass("an1");
}
if(top>t3){
$("#a3").addClass("an1");
}
});
</script>

怎样使CSS3中的animation动画当每滑到一屏时每次都运行的更多相关文章

  1. 如何使CSS3中的animation动画当每滑到一屏时每次都运行

    这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...

  2. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  4. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  5. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  6. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  7. css3中变形与动画(一)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  8. css3中的animation

    不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在di ...

  9. css3中变形与动画(二)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. 基于curl 的zabbix API调用

    1,认证并取得加密字段 curl -i -X POST -H 'Content-Type: application/json' -d '{"jsonrpc":"2.0&q ...

  2. OpenOffice 服务开机启动

    1.准备以下软件 OpenOffice3.0,Windows Resource Kit Tools 分别默认安装 2.打开Windows Resource Kit Tools -> Comman ...

  3. java基础学习(一)

    去年10月份从学校出来实习,从事javaWeb方面的开发.到现在已经快1年了.突然间感觉自己的java基础知识忘记的很厉害,或者说知识掌握的不牢吧.回顾自己学习java,发现我竟然一本关于java基础 ...

  4. EXCEL VBA运行不显示系统提示

    Sub XXX() Application.DisplayAlerts = False '代码段 Application.DisplayAlerts = True End Sub 以下是MICROSO ...

  5. WebForm Repeater的事件、后天数据展示--2017年1月8日

    Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 CommandName : 判断点击的是什么按钮,e.Comma ...

  6. 【题解】A-B

    [问题描述]出题是一件痛苦的事情!题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的 A+B Problem,改用 A-B 了哈哈!好吧,题目是这样的:给出一串数以及一个数字 C,要求计算出所有 A-B ...

  7. cocos2d与cocos2d-X中的draw和update

    像其它的游戏引擎一样,我们有两个不同的方法来完成draw和update. 1: Draw:每一个CCNode都有一个draw方法,每一帧都会调用.我们只在这个方法里做描绘的事情. 2: Update: ...

  8. [Flux] 3. Actions

    Actions contain no functionality, but rather describe an event in our application. In this lesson we ...

  9. Hadoop WritableComparable接口

    WritableComparable接口 Writable接口大家可能都知道,它是一个实现了序列化协议的序列化对象.在Hadoop中定义一个结构化对象都要实现Writable接口,使得该结构化对象可以 ...

  10. [转] 用管道获得shell 命令的输出

    用管道: 通过fgets(buf, n, ptr)buf就可以得到命令“ps -ef"一样的信息, 读帮助”man popen": char *cmd = "ps -ef ...