Home > Web Front-end > HTML Tutorial > Effeckt.css project: Collection of CSS interactive animation applications_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 12:05:34
Original
1186 people have browsed it

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

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template