Quickly add cool CSS3 animation to the page chrome plugin.

use

1. Download it from chrome WebStore

Chrome App Store installation address

2. Download the CRX file

If you cannot access chrome’s App Store, download the app. CRX file, open the Chrome :// Extensions/page, and drag the app. CRX plug-in to the Extensions panel to install it. Download address

3. Build your own

  • npm install -g vue-cli
  • git clone https://github.com/vace/css3-animation-generator
  • cd css3-animation-generator && npm install
  • npm run app

Style export rules:

  1. Preferentially use withc3Prefix class, as in<span class="c3-test">animate it</span>
  2. If class exists, the class selector is used, as in<span class="fl animate">animate it</span>
  3. If an Id is defined, the Id selector is used, as in<span id="anim1">animate it</span>
  4. If none exists, an internal custom selector is used to find the scheme

example

tips

Some scripts use javascript Set, please try to upgrade Chrome to a newer version. Chrome48 + used in the test works fine! The exported animations may need to be prefixed to be compatible with all browsers. Autoprefix is recommended. Consider adding this feature later.

Remark

  • animate.css
  • magic.css
  • iview
  • vue
  • chrome developer