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-переходах и keyframe-анимациях, отобранных так, чтобы держать 60fps на мобильных устройствах.
Чем она отличается от Animate.css?Автор называет Animate.css очень хорошей работой и хочет идти дальше: подобранный дизайнером набор элегантных переходов интерфейса — модальные окна, смены страниц, изменения состояний — с жёсткими требованиями к производительности.
Как подключить её к проекту и пользоваться?Документированной установки нет — раздел Getting Started оставили пустым. План был такой: веб-конструктор, который выдаёт только нужный вам CSS, а эффекты применяются через минимальные стилевые хуки.
Проект ещё поддерживается?Нет. Репозиторий заархивирован, так что то, что вы видите, — финальное состояние: это скорее снимок эпохи 2013 года, чем живая библиотека.
Какие браузеры и устройства он поддерживает?На первом месте — мобильные браузеры. Официальных правил поддержки ещё предстояло выработать, а для старых браузеров вроде Android 2.3 планировалась плавная деградация.
Что происходит с hover-эффектами на мобильных?Поскольку в мобильном вебе нет hover, эффекты, построенные на нём, либо исключены из набора, либо получили аналог по тапу.
Могу ли я предложить новые эффекты или помочь с API?Да — README приглашает создавать тикеты с демо переходов, которые стоит включить, и с помощью в определении 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