Skip to content
Get packs

Effeckt.css

A CSS library of transition and animation effects for mobile web (archived, no longer maintained).

GitHub Download source
Stars
10.8k
Forks
1.3k
Licence
MIT
Language
CSS
Last update
7.7 years ago
Type
Library

This repository is archived and no longer maintained.

What it is

Effeckt.css is a collection of CSS transition and animation effects aimed at making mobile web interfaces feel smooth. It focuses on effects built on CSS transitions and keyframes that use hardware-accelerated transforms and opacity, with the goal of running at 60fps on phones and tablets. The repository is archived, so it is no longer being developed or updated.

  • Reading the CSS to see how transform and opacity animations were used for smoother mobile transitions
  • Borrowing effect ideas such as button touch feedback or modal transitions as design inspiration
  • Reviewing the project's stated goals on browser support and avoiding expensive CSS properties

Great for

  • Developers studying how CSS-only mobile animations were structured in the past
  • Designers looking for reference ideas for subtle UI transitions
  • Learners exploring performance-minded CSS animation choices
  • Maintainers of legacy sites that already use Effeckt.css

Not ideal for

  • New projects needing maintained code, since the repo is archived and last pushed in March 2019
  • Anyone needing a web-based or command-line builder, which the README lists as a goal but does not show as delivered
  • Teams needing guaranteed support for older browsers, as the README only states an aspiration to degrade gracefully on Android 2.3

How to get it

  1. 1

    Clone and build from source

    Clone the repository

    git clone https://github.com/h5bp/Effeckt.css
  2. 2

    Run it

    • Clone the repository or download it from GitHub
    • Open the project's demo page at http://h5bp.github.io/Effeckt.css to see the effects
    • Read the Getting Started wiki page linked in the README for usage details
  3. 3

    Get the most out of it

    • Check the demo site to preview effects before using them
    • Review the Code Style Guide wiki page if you plan to adapt the CSS
    • Look at the examples list in the README for related third-party demos

Downloads

Source code (.zip)master branch · straight from GitHubOfficial website & docsh5bp.github.io/Effeckt.css

Strengths

  • Focused on performance: the stated goal is jank-free 60fps using transforms and opacity
  • Clear design goals, such as excluding effects like blur() filters that cannot hit performance targets
  • Built on the well-known Animate.css work and credited to the h5bp community

Trade-offs

  • Archived and unmaintained, so it will not receive bug fixes or updates
  • The README is brief and mostly points to external wiki pages for setup
  • The builder tool mentioned in the goals is not described as available in this README

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.