vace / css3-animation-generator

chrome plugin css3 animation generator

Chrome Plugin Css3 Animation

快速给页面加上炫酷css3动画的chrome插件。

使用

1.从chrome webstore下载

chrome应用商店安装地址

2.直接下载crx文件

如果无法访问到chrome的应用商城，可以选择下载app.crx文件,在chrome中打开chrome://extensions/页面，将app.crx插件拖动到扩展程序面板即可完成安装。 下载地址

3.自行构建

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

样式导出规则：

1. 优先使用带有 c3前缀的class，如 <span class="c3-test">animate it</span>
2. 如果存在class，则使用class选择器，如 <span class="fl animate">animate it</span>
3. 如果定义了Id，则使用id选择器，如 <span id="anim1">animate it</span>
4. 如果都不存在，则使用内部自定义的选择器查找方案

例子

tips

部分脚本中使用了 javascript 的Set，请尽量升级 chrome 到比较新的版本。测试使用的chrome48+都可以正常使用！导出的动画可能需要加前缀才可以兼容所有浏览器，推荐使用autoprefix，后期考虑加入这个功能。

Remark

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

css3-animation-generator's Issues

当重复点击 预览动画 时,无法出现效果.

https://github.com/vace/css3-animation-generator/blob/master/src/components/Parameter.vue#L130

这里粗略看只是动态插入css样式,没办法重新激活当前选中的节点

建议：增加class钩子功能

chrome商店上有个Animation Generator扩展，里面有个"Selector format"功能：

在这里可以定义你的选择器格式, eg. 当Selector format设为"{{your className}}"时，生成代码的选择器为".anim-yourclass"。当Selector format设为".active {{your className}}"时，生成代码的选择器为".active .anim-yourclass"

这样可以方便自定义导出动画使用的class名，推荐增加类似功能。

参考扩展地址：
https://chrome.google.com/webstore/detail/animation-generator/kionilekanaambbbnjghihllokicnnlj

你好，为什么商店内搜索不到您的这个控件了呢？

在您空间里下载的ctx 也是无法安装的？

大神看看这个动画库？

http://animista.net/
这个也挺全的，看看是否有必要加一个呢？