这个得结合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. Android Studio下载及离线升级方法

    由于众所周知的原因,android官网无法访问,所以我们要用到翻.墙.工具,我用的是自.由.门,大家自行搜索下载. android studio下载地址: https://dl.google.com/ ...

  2. php 文本框里面显示数据库调出来的资料

    php 文本框里面显示数据库调出来的资料,,,在里面我标注了,,那个地方为什么是!=才能显示正确的数据库资料啊?我理解的是对比正确输出数据库内容的.大师貌似不知道为什么就写错了 <html> ...

  3. java对Ldap操作2

    package ldap.pojo;import java.util.List;/** * @author 张亮  * ldap用户属性信息数据类 */public class LdapPersonI ...

  4. MySQL注入总结

    SELECT first_name, last_name FROM users WHERE user_id = '$id' 1.id=1' or 1=1 --     这个可以查询所有的信息,其中“- ...

  5. ELK Packetbeat 部署指南(15th)

    原文链接:http://www.ttlsa.com/elk/elk-packetbeat-deployment-guide/ Packetbeat 是一个实时网络数据包分析工具,与elasticsea ...

  6. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  7. c#基础语言编程-正则表达式基础

    引言 正则表达式是一种用高度抽象的字符串来描述字符串特征,进而实现对字符串的匹配.提取.替换等等.正则表达式(以下简称正则,Regex)通常不独立存在,各种编程语言和工具作为宿主语言提供对正则的支持, ...

  8. jstree 节点拖拽保存数据库

    需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...

  9. HUNNU--湖师大--11409--Skill

    Skill Yasser is an Egyptian coach; he will be organizing a training camp in Jordan. At the end of ca ...

  10. Swift学习笔记八:枚举

    1. 枚举语法      1)枚举的定义 使用enum关键词而且把它们的整个定义放在一对大括号内: enum SomeEumeration { // enumeration definition go ...