Effekt.css – 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.

This library has a few goals:

  1. It provides very little UI of its own. It’s only hooks for transitions/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
  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 equivalent.
View Demo Download Here

Written by Fribly Editorial

Fribly is a digital magazine where we will share useful and awesome stuff for your inspiration and benefit.
We will hope to bring you daily resources and inspiration from all around the web. You just sit back and enjoy, and we will do all the search work for you. We will strive to find the best and most useful stuff out there.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

GIPHY App Key not set. Please check settings

    Watercolor Fantasy Skies