Performant Transitions & Animations
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
Head here → http://github.com/h5bp/Effeckt.css/issues
Head here → http://h5bp.github.io/Effeckt.css/dist/
If you'd like to contribute to the Effeckt.css project (btw you're awesome for doing so) then we suggest you do the following…
Please keep your commits targeted in a logical fashion in order to keep code review and merges as clean.
General CSS style guide:
data-effecktor prefixed with that
You'll have to:
npm install -g grunt-cli
grunt devto start watching for file saves & run a local web server at port 8000 (localhost:8000).
Here's a few pieces of excellent work:
Because there are so many, I expect we could group things by role:
This library/framework would come with some goals:
blur()css filter), it cannot be included.