目前，网上有大量基于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. ListView与.FindControl()方法的简单练习 #2 -- ItemUpdting事件中抓取「修改后」的值

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/24/listview_itemupdating_findcontrol_201 ...

  2. UCOS2_STM32F1移植详细过程（三）

    Ⅰ.概述 上一篇文章是讲述ST芯片相关的配置和OS裁剪相关的配置,接着上一篇文章来讲述关于UCOS的移植,该文主要针对uC/OS-II Ports下面os_cpu_a.asm.os_cpu_c.c和o ...

  3. 用Java简单实现C#的参数为Action<T> Function<T,boolean>扩展方法

    直接上代码 Blog.Java public class Blog { public Blog(int id,String name) { Id=id; Name=name; } public int ...

  4. XSS的原理分析与解剖[转http://www.freebuf.com/articles/web/40520.html]

    0×01 前言: <xss攻击手法>一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的<白帽子讲WEB安全>和cn4rry的<XSS跨站脚本攻击剖析 ...

  5. nodejs使用mongoose

    var mongoose = require("mongoose"); // 连接字符串格式为mongodb://主机/数据库名 mongoose.connect('mongodb ...

  6. Entity Framework 插入数据出现重复插入（导航属性硬是要查再一遍???????）

    问题: Artist artmodel = new Artist(); artmodel.user = uinfo; _artiests.Add(artmodel); 新增一条Artist记录,但是同 ...

  7. MVC4.0 如何设置默认静态首页index.shtml

    1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.Igno ...

  8. Qt：禁止qDebug的输出

    Qt:禁止qDebug的输出 在工程的.pro文件里加上以下编译批令即可: DEFINES += QT_NO_DEBUG_OUTPUT

  9. xml数据读 swift

    // // ViewController.swift // xml读写 // // Created by mac on 15/7/14. // Copyright (c) 2015年 fangyuha ...

  10. 分布式架构--第一篇--项目拆分（maven命令生成多模块项目）

    预览生成的项目结构: ying-yue-parent // 顶级总编译控制模块 ying-yue-lib // jar模块 ying-yue-model // 模型对象模块 ying-yue-dao ...