{"action":"created","issue":{"url":"https://api.github.com/repos/zhouwenbin/blog/issues/8","repository_url":"https://api.github.com/repos/zhouwenbin/blog","labels_url":"https://api.github.com/repos/zhouwenbin/blog/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/zhouwenbin/blog/issues/8/comments","events_url":"https://api.github.com/repos/zhouwenbin/blog/issues/8/events","html_url":"https://github.com/zhouwenbin/blog/issues/8","id":118993609,"number":8,"title":"postcss-animation插件发布","user":{"login":"zhouwenbin","id":1428546,"avatar_url":"https://avatars.githubusercontent.com/u/1428546?v=3","gravatar_id":"","url":"https://api.github.com/users/zhouwenbin","html_url":"https://github.com/zhouwenbin","followers_url":"https://api.github.com/users/zhouwenbin/followers","following_url":"https://api.github.com/users/zhouwenbin/following{/other_user}","gists_url":"https://api.github.com/users/zhouwenbin/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouwenbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouwenbin/subscriptions","organizations_url":"https://api.github.com/users/zhouwenbin/orgs","repos_url":"https://api.github.com/users/zhouwenbin/repos","events_url":"https://api.github.com/users/zhouwenbin/events{/privacy}","received_events_url":"https://api.github.com/users/zhouwenbin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2015-11-26T08:08:51Z","updated_at":"2016-07-01T11:59:49Z","closed_at":null,"body":"## 简介\r\n[postcss-animation](https://github.com/zhouwenbin/postcss-animation/)用来帮我们添加动画的关键帧，数据来自[animate.css](https://github.com/daneden/animate.css)，会按需要生成相应的关键帧，不用导入一大坨样式。\r\n## 用法\r\n```\r\nnpm install postcss-animation --save-dev\r\n```\r\n## 配置\r\n### postcss\r\n新建一个`postcss.js`文件，代码如下\r\n```js\r\n// Dependencies\r\nvar fs = require('fs');\r\nvar postcss = require('postcss');\r\nvar animation = require('postcss-animation');\r\n\r\n// CSS to be processed\r\nvar css = fs.readFileSync('input.css', 'utf8');\r\n\r\nvar output = postcss()\r\n  .use(animation())\r\n  .process(css)\r\n  .css\r\n\r\nconsole.log('\\n===>Output CSS:\\n', output);\r\n```\r\n在命令行输入`node postcss.js`执行\r\n### grunt\r\n在根目录新建`gruntfile.js`，代码如下\r\n```js\r\nmodule.exports = function(grunt) {\r\n  grunt.initConfig({\r\n    pkg: grunt.file.readJSON('package.json'),\r\n    postcss: {\r\n      options: {\r\n        processors: [\r\n          require('postcss-animation')(),\r\n          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss\r\n        ]\r\n      },\r\n      dist: {\r\n        src: ['src/*.css'],\r\n        dest: 'build/grunt.css'\r\n      }\r\n    }\r\n  });\r\n\r\n  grunt.loadNpmTasks('grunt-contrib-uglify');\r\n  grunt.loadNpmTasks('grunt-postcss');\r\n\r\n  grunt.registerTask('default', ['postcss']);\r\n}\r\n```\r\n在命令行输入`grunt postcss`\r\n### gulp\r\n在根目录新建gulpfile.js，代码如下\r\n```js\r\nvar gulp = require('gulp');\r\nvar postcss = require('gulp-postcss');\r\nvar animation = require('postcss-animation')\r\nvar autoprefixer = require('autoprefixer-core')\r\n\r\ngulp.task('default', function () {\r\n    var processors = [\r\n        animation(),\r\n        autoprefixer({ browsers: ['> 0%'] })\r\n       \r\n    ];\r\n    gulp.src('src/*.css')\r\n        .pipe(postcss(processors))\r\n        .pipe(gulp.dest('build'))\r\n});\r\ngulp.watch('src/*.css', ['default']);\r\n```\r\n在命令行输入`gulp`\r\n## 实例\r\n```css\r\n/*input.css*/\r\n.foo {\r\n  animation-name: bounce;\r\n}\r\n```\r\n```css\r\n/*output.css*/\r\n.foo {\r\n  animation-name: bounce;\r\n}\r\n@keyframes bounce {\r\n  from, 20%, 53%, 80%, to {\r\n    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\r\n    transform: translate3d(0,0,0);\r\n  }\r\n  40%, 43% {\r\n    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\r\n    transform: translate3d(0, -30px, 0);\r\n  }\r\n  70% {\r\n    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\r\n    transform: translate3d(0, -15px, 0);\r\n  }\r\n  90% {\r\n    transform: translate3d(0,-4px,0);\r\n  }\r\n}\r\n```\r\n## 测试用例\r\ntest里面是所有的测试用例\r\n```\r\n$ git clone https://github.com/zhouenbin/postcss-animation.git\r\n$ cd postcss-animation\r\n$ npm install\r\n$ npm test\r\n```"},"comment":{"url":"https://api.github.com/repos/zhouwenbin/blog/issues/comments/229929027","html_url":"https://github.com/zhouwenbin/blog/issues/8#issuecomment-229929027","issue_url":"https://api.github.com/repos/zhouwenbin/blog/issues/8","id":229929027,"user":{"login":"zhouwenbin","id":1428546,"avatar_url":"https://avatars.githubusercontent.com/u/1428546?v=3","gravatar_id":"","url":"https://api.github.com/users/zhouwenbin","html_url":"https://github.com/zhouwenbin","followers_url":"https://api.github.com/users/zhouwenbin/followers","following_url":"https://api.github.com/users/zhouwenbin/following{/other_user}","gists_url":"https://api.github.com/users/zhouwenbin/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouwenbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouwenbin/subscriptions","organizations_url":"https://api.github.com/users/zhouwenbin/orgs","repos_url":"https://api.github.com/users/zhouwenbin/repos","events_url":"https://api.github.com/users/zhouwenbin/events{/privacy}","received_events_url":"https://api.github.com/users/zhouwenbin/received_events","type":"User","site_admin":false},"created_at":"2016-07-01T11:59:48Z","updated_at":"2016-07-01T11:59:48Z","body":"@shikelong 编译出了问题"}}
{"actor":{"display_login":"zhouwenbin"}}