这个得结合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. spring maven pom

    https://spring.io/blog/2009/12/02/obtaining-spring-3-artifacts-with-maven/

  2. poj 2479 Maximum sum (最大字段和的变形)

    题目链接:http://poj.org/problem?id=2479 #include<cstdio> #include<cstring> #include<iostr ...

  3. Spark RDD概念学习系列之rdd的依赖关系彻底解密(十九)

    本期内容: 1.RDD依赖关系的本质内幕 2.依赖关系下的数据流视图 3.经典的RDD依赖关系解析 4.RDD依赖关系源码内幕 1.RDD依赖关系的本质内幕 由于RDD是粗粒度的操作数据集,每个Tra ...

  4. uva11549 Floyd判圈法

    题意: 给两个数n, k,每次将k平方取k的前n位,问所有出现过的数的最大值 原来这就是floyd判圈法.. #include<cstdio> #include<cstdlib> ...

  5. Android RecyclerView使用(一)

    RecyclerView一种可以替换掉listview gridview 瀑布流等控件的新视图控件,控制视图回收和复用 ==优化内存可以替换listview 与listview的不同之处是:listv ...

  6. window7 输入什么命令可以快速打开服务管理?? 虚拟机设置了NAT网络连接方式,还是无法上网?

    window7 输入什么命令可以快速打开服务管理?? 虚拟机设置了NAT网络连接方式,还是无法上网? 1.我遇到的问题? 在虚拟机安装了linux系统,并且把网络连接方式设置为NAT,如图: 意思就是 ...

  7. HTML Canvas 鼠标画图

    原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙) 译文: http: ...

  8. Linux 性能分析工具 nmon for Linux

    http://blog.csdn.net/defonds/article/details/41725929 http://blog.csdn.net/fansy1990/article/details ...

  9. 进程的优先级 与 CFS 进程调度

    在Linux下改变进程的优先级 作者:曾老师,华清远见嵌入式学院讲师. 作为多任务的操作系统,Linux内核为每个创建的进程分配时间片并根据其优先级进行调度.当进程被创建时,其对应的task_stru ...

  10. Windows7如何在安全模式下卸载驱动(亲测)

    在桌面“我的电脑”上点鼠标右键,选择“属性”,“硬件”,“设备管理器”,找到“显示卡选项”,打开前面的“+”,然后按鼠标右键,选择“卸载”就可以了. (亲测,主板驱动卸载成功启动)