Effeckt.css project: Collection of CSS interactive animation applications_html/css_WEB-ITnose

Currently, there are a large number of experiments and examples based on CSS transformations on the Internet, but they are all too scattered. The goal of Effectkt.css is to centralize all applications based on CSS/jQuery animation, such as pop-up windows and buttons. , navigation, list, page switching, etc.

Effeckt.css is a collection of many fresh and practical CSS/jQuery animation effect applications, suitable for both websites and mobile web development, such as: pop-up windows, buttons, navigation, lists, page switching Wait, these special effects animations can improve the user experience of your website, and they are simple and practical.

Demo page: http://h5bp.github.io/Effeckt.css/dist/

Original intention of the project

Developed for mobile Web websites And designing a UI is no easy task, especially when streaming and executing at 60fps. The ideal approach is to perform jank-free conversions based on CSS transitions and keyframe animations for mobile phones/tablets, especially taking advantage of changes in hardware and transparency to speed up conversions.

Currently, there are a large number of experiments and examples based on CSS transformations on the Internet, but they are all too scattered, and the goal of Effeckt.css is to centralize all applications based on CSS/jQuery animation.

　Specific application:

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/

　Project goal:

Less UI, focusing only on transitions/animations;

Have elegant, reasonable dynamic effects;

Create browser support guide;

CSS performance regression testing;

Provide jank-free 60fps for target browsers/devices;

If a feature cannot meet performance goals, you can exclude this feature;

How to avoid affecting other styles Element Guidelines (avoid expensive CSS)

Provide a builder so users can push CSS according to their needs

There is no hover effect on mobile devices, so anything based on the hover effect will be Excluded or have a click action effect.

For more details about Effeckt.css, please visit: https://github.com/h5bp/Effeckt.css

Question consultation and feedback: http://github.com/ h5bp/Effeckt.css/issues

Domestic mirror address: https://code.csdn.net/OS_Mirror/Effeckt.css