Effeckt.css README

The project's README from github.com/h5bp/Effeckt.css. As one markdown file: README.md.

This repo is archived

Effeckt.css

A Performant Transitions and Animations Library : http://h5bp.github.io/Effeckt.css

Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

@daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.

Originally started at h5bp/lazyweb-requests#122

Effeckt Trailer

image

Examples To Add

Because there are so many, I expect we could group things by role:

Goals

  1. Provide a minimal UI. Only use style hooks for transitions and animations.
  2. Designer-curated set of classy and reasonable effects. (no easeInBounce)
  3. Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
  4. CSS performance regression testing (a la bench.topcoat.io)
  5. Deliver jank-free 60fps performance on target browsers/devices
  6. If a particular effect cannot deliver target performance (hey blur() css filter), it cannot be included.
  7. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
  8. Deliver a builder so users can pull only the CSS they need.
  9. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap-based equivalent.

Action

Getting Started

Code Style Guide

General Inquiries & Support

Bug Reports & Feature Requests

Effeckt.css (h5bp/Effeckt.css)

Searching Database…

10.8K ·GitHub
Effeckt.css
archived
这是什么？Effeckt.css 是一个高性能的网页过渡与动画库，基于 CSS 过渡和关键帧动画打造，所选效果都以在移动设备上保持 60fps 为目标。
它和 Animate.css 有什么不同？作者认为 Animate.css 是很出色的作品，并想在它的基础上更进一步：由设计师精心挑选的一组优雅的界面过渡效果——弹窗、页面切换、状态变化——并且有严格的性能指标。
我该怎么把它加到项目里并使用？没有文档化的安装方式——Getting Started 部分一直空着。原计划是做一个网页版构建工具，只输出你需要的 CSS,通过极简的样式钩子来应用各种效果。
这个项目还在维护吗？没有了。仓库已经归档，你看到的就是最终状态——把它当作 2013 年的快照来看，而不是一个仍在更新的库。
它面向哪些浏览器和设备？以移动端网页浏览器为优先。正式的支持规范当时尚未确定，但计划对 Android 2.3 这类旧浏览器做优雅降级。
在手机上悬停效果会怎样？由于移动网页没有悬停操作，基于悬停的效果要么被排除在外，要么会提供基于点按的等效效果。
我可以提议新效果或帮忙完善 API 吗？可以——README 邀请大家提交 issue,推荐值得收录的过渡效果演示，或帮忙定义 API；另外还有一个 Effeckt.css 邮件列表，可用于一般性咨询。
What are similar projects?skrollr, parallax, lax.js, simplefolio, Magnific-Popup, impress.js, draggable, interact.js
Which topics is it in?css3, animation, deprecated, css, browser, html, mobile, ui, web-development, performance, frontend, library
Creator
h5bp
Size
1.9 MB
Stars
10.8K
Updated
CommitMar 01
Age
13y
Commits · 90 Days