OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

CSS3动画效果速查参照表


分享到
分类 JS开源   关键字 开源   发布 ourjs  1417397572416
注意 转载须保留原文链接,译文链接,作者译者等信息。  



它是怎么工作的


该CSS3动画参照表是一组为你的web项目预设的插件和动画播放效果。你只需要将样式添加到您的网站和并应用一些预定义的CSS类,来实现你想要的动画效果。

该CSS3动画参照表使用CSS3@keyframes并适用于所有现代浏览器(IE10)。使用CSS3@keyframes,你不必调整元素的定位以适应动画 - 它将自动到位。还为用户提供旧版浏览器向后支持,如果动画不被触发,该元素也将是可见的,并保持不变。下面是关于如何应用的说明。

添加下面的动画样式文件引用到你网页的<head>元素中:

<link rel="stylesheet" href="css/animations.css">

在你想要添加动画的元素上添加对应的动画样式类名, “slideUp” (向上滑入)

<div id="object" class="slideUp">

你可以将slideUp换成你想要的任何动画类。

对于渐入的动画,最好先在动画元素上添加不可见的样式: visibility: hidden (注* 不可见,但占用空间仍在,这样不会影响页面布局)

#object{
    background-color: #fe5652;
    visibility: hidden;
}

添加效果


默认情况下,这些动画会在页面加载时触发 - 即使元素页面的很下方 - 但是你可以使用jQuery来激活动画。

下面是一段使用jQuery来触发动画的例子: (注* 当动画元素在窗口的可见区域时,添加动画效果)

<script>
$(window).scroll(function() {
  $('#animatedElement').each(function() {
  var imagePos = $(this).offset().top;

  var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
      $(this).addClass("slideUp");
    }
  });
});
</script>

400 代表动画元素距离窗口顶部的距离,当小于400象素即可触发动画效果, 下面在用户点击时添加动画:

<script>
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});
</script>


附: 动画样式列表


进入动画列表

slideUp
slideDown
slideLeft
slideRight
slideExpandUp
expandUp
fadeIn
expandOpen
bigEntrance
hatch

混合动画列表

bounce
pulse
floating
tossing
pullUp
pullDown
stretchLeft
stretchRight

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NodeJS会是昙花一现吗?
  2. NodeJS就是癌症[2011]
  3. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  4. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  5. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  6. Go语言实例教程基础语法篇(一)
  7. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  8. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  9. 基于HTML5和JavaScript实现的Winamp MP3播放器
  10. Node.JS编码规范指南教程:教你优雅地写JavaScript代码
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. CSS3动画效果速查参照表
  2. LokiJS:用JavaScript实现的面向文档的内存数据库
  3. 基于HTML5和JavaScript实现的Winamp MP3播放器
  4. Walkway用简单的方法为SVG元素添加动画效果
  5. 15个最好用的Node.JS后端框架
  6. 将GO编绎成JavaScript,用GO语言来写前端代码
  7. JuliusJS: 基于JavaScript的在线语音识别库
  8. PathFinding.js: 基于JavaScript的开源智能寻路算法库
  9. 了不起的Node.JS和前端资源:一些有用的资源列表
  10. 可访问的HTML5 Video视频播放器

 关键字 - 开源
  1. Mongoose学习参考文档——基础篇
  2. 15个最好用的Node.JS后端框架
  3. 迫于社区压力:React(Native)16将更换成MIT开源协议
  4. 开源Node.js商城:基于Thinkjs+Mysql的开源微信小程序商城
  5. 使用NodeJS搭建邮件自动发送服务器
  6. NodeJS 文件(夹)压缩/解压方案(zip/unzip)-Linux上zip相关命令
  7. QRCode:用纯JavaScript实现的微信二维码图片生成器
  8. Stop-Server:用手机关闭你的电脑
  9. 几款开源的图形化Redis客户端管理软件
  10. Node.JS如何调用Chrome打开浏览器链接地址

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号