Effeckt.css: CSS library of performant transitions and animations for mobile

[paulirish]

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.

I'd like to work with some folks on a collection of transitions and keyframe animations. @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. Here's a few pieces of excellent work

• tympanus.net/Development/ModalWindowEffects/
• tympanus.net/Development/PageTransitions/
• tympanus.net/Development/PFold/index2.html
• leaverou.github.io/animatable/
• lab.hakim.se/ladda/
• lab.hakim.se/kontext/
• lab.hakim.se/avgrund/
• lab.hakim.se/meny/

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

• button/touch effects
• state transition
• modal/notification transition
• attention attractors

  Goals

This library/framework would come with some goals:

1. It provides no UI of it's own. It's only hooks for transitions.
2. Designer-curated set of classy and reasonable effects. (no easeInBounce)
3. Establish browser support guidelines (I expect 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.

   Holler

Anyone else been thinking along these lines?

ping @hakimel @leaverou @desandro @crnacura @botelho

Also, @daneden if you're up to it, maybe it's best to do this work as part of your already awesome project.

---

Action:

• If you know other transition/keyframe animation based demos/experiments that make senes to include here, comment below!
• If you're interested in helping to define the API let's hear it.
• A web-based builder is a must. A cmd-line builder isn't important for this, I'd say.

[lifeiscontent]

would love to be apart of this @paulirish

[tonge]

Let me know if I can join in @paulirish I have done quite a number of different css animations

[jfroffice]

Other great transitions.

http://themeforest.net/item/matrix-responsive-wordpress-theme/full_screen_preview/3215443 https://github.com/woothemes/FlexSlider

Also want to contribute.

[justinaguilar]

I did some exploration into CSS3 @keyframe animations. You can download the .css file of preset animations to easily implement on your sites:

http://justinaguilar.com/animations/

@hakimel @leaverou @desandro @crnacura @botelho

[arthurvr]

Maybe this can be closed down? Effeckt now has a separated repo where things can be discussed, so no reason for this issue to exist anymore.

[alrra]

➜ https://github.com/h5bp/Effeckt.css