目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来，例如：弹窗、按钮、导航、列表、页面切换等等。

　　Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，而且简单实用。

　　Demo页：http://h5bp.github.io/Effeckt.css/dist/

　　项目初衷

　　为移动Web网站开发和设计UI并不是件容易的事情，尤其是在60fps下传输和执行。最理想的做法就是基于手机/平板电脑的CSS过渡和关键帧动画来进行jank-free转换，特别是利用硬件和透明度的变化来加速转换。

　　目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来。

　　具体应用：

　　项目目标：

  • UI较少，只专注于转换/动画；
  • 具有优雅、合理的动态效果；
  • 创建浏览器支持指南；
  • CSS性能回归测试；
  • 针对目标浏览器/设备提供jank-free 60fps；
  • 如果某个功能不能达到性能目标，可以排除这个功能；
  • 有如何避免影响到其它样式元素指南（避免expensive CSS）
  • 提供一个builder，用户可以根据他们的需要来推送CSS
  • 移动设备上是没有悬浮效果的，所以任何基于悬浮特效的都将被排除在外或者是有一个点击的动作特效。

　　关于Effeckt.css的更多详情，可以访问：https://github.com/h5bp/Effeckt.css

　　问题咨询与反馈：http://github.com/h5bp/Effeckt.css/issues

　　国内镜像地址：https://code.csdn.net/OS_Mirror/Effeckt.css

Effeckt.css项目：CSS交互动画应用集锦的更多相关文章

  1. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  2. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  3. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  4. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  5. Android github上开源项目、酷炫的交互动画和视觉效果地址集合

    Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...

  6. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  7. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  8. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...

  9. css吃豆人动画

    一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...

随机推荐

  1. delphi中表示跳出的有break，continue, exit，abort, halt, runerror

      1.break 强制退出循环(只能放在循环中),用于从For语句,while语句或repeat语句中强制退出. 2.continue 用于从For语句,while语句或repeat语句强行结束本次 ...

  2. sql 子查询要命名

    Date1 from ( select distinct Date1 from TableName where Date1 > '2013-5-1' )A --这里加个A,B,C随便你 或者as ...

  3. 学习simple.data之高级篇

    一.调用存储过程 1.不带参数 CREATE PROCEDURE ProcedureWithoutParams AS SELECT * FROM ORDER; 调用db.ProcedureWithou ...

  4. JS中的集中页面跳转的方法

    第一种:    <script language="javascript" type="text/javascript">           wi ...

  5. C++基本数据类型解惑

    记得刚学C语言的时候,对那些double,float,long,unsigned int各种混乱,基本是随便用,对数据类型没有一个整体的框架.最近学习<<C++ primer plus&g ...

  6. 【Django】Apache上运行多个Django项目

    运行单个项目的步骤参考:这里 1 安装环境 操作系统:Ubuntu 12.04 LTS 32 位(安装在VMware虚拟机中) python 版本: Python 2.7.3 Django版本 > ...

  7. openerp 经典收藏 记录规则 – 销售只能看到自己的客户，经理可以看到全部（转载）

    记录规则 – 销售只能看到自己的客户,经理可以看到全部 原文地址:http://cn.openerp.cn/record_rule/ OpenERP中的权限管理有四个层次: 菜单级别: 即,不属于指定 ...

  8. EMVTag系列8《IC卡公钥证书》

    Ø  9F46    IC卡公钥证书 L: NI -C(有条件):如果支持DDA 发卡行认证过的IC 卡公钥 Ø  9F47    IC卡公钥指数 F: b T: 9F47 L: 1 or 3 C:如 ...

  9. Visual Studio 2013中添加mimeType

    事例: cd C:\Program files\IIS Expressappcmd set config /section:staticContent /+[fileExtension='.json' ...

  10. golang初试:坑爷的

    用Golang与perl脚本比较, 初想至多差一倍吧...结果可不是一般的坑爹, 简直就是坑爷了. Perl脚本 #!/bin/bash source /etc/profile; function e ...