├── .gitignore ├── test ├── fixtures │ ├── flip.css │ ├── tada.css │ ├── fadeIn.css │ ├── fadeOut.css │ ├── flash.css │ ├── flipInX.css │ ├── flipInY.css │ ├── hinge.css │ ├── jello.css │ ├── pulse.css │ ├── rollIn.css │ ├── rollOut.css │ ├── shake.css │ ├── swing.css │ ├── wobble.css │ ├── zoomIn.css │ ├── zoomOut.css │ ├── bounceIn.css │ ├── bounceOut.css │ ├── fadeInUp.css │ ├── fadeOutUp.css │ ├── flipOutX.css │ ├── flipOutY.css │ ├── rotateIn.css │ ├── rotateOut.css │ ├── slideInUp.css │ ├── zoomInUp.css │ ├── zoomOutUp.css │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInUp.css │ ├── bounceOutUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── lightSpeedIn.css │ ├── rubberBand.css │ ├── slideInDown.css │ ├── slideInLeft.css │ ├── slideInRight.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ ├── slideOutUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ ├── zoomInRight.css │ ├── zoomOutDown.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── bounceInRight.css │ ├── bounceOutDown.css │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── fadeInDownBig.css │ ├── fadeInLeftBig.css │ ├── fadeInRightBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ ├── lightSpeedOut.css │ ├── rotateInUpLeft.css │ ├── slideOutRight.css │ ├── fadeOutRightBig.css │ ├── rotateInDownLeft.css │ ├── rotateInDownRight.css │ ├── rotateInUpRight.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpLeft.css │ ├── rotateOutUpRight.css │ ├── rotateOutDownRight.css │ ├── bounce-atRoot.css │ ├── fadeIn.expected.css │ ├── fadeOut.expected.css │ ├── flash.expected.css │ ├── zoomIn.expected.css │ ├── fadeOutUp.expected.css │ ├── fadeOutDown.expected.css │ ├── fadeOutLeft.expected.css │ ├── fadeOutRight.expected.css │ ├── fadeOutUpBig.expected.css │ ├── fadeOutDownBig.expected.css │ ├── fadeOutLeftBig.expected.css │ ├── fadeInUp.expected.css │ ├── fadeOutRightBig.expected.css │ ├── rollOut.expected.css │ ├── lightSpeedOut.expected.css │ ├── fadeInDown.expected.css │ ├── fadeInLeft.expected.css │ ├── fadeInRight.expected.css │ ├── slideInUp.expected.css │ ├── slideOutUp.expected.css │ ├── zoomOut.expected.css │ ├── fadeInUpBig.expected.css │ ├── slideInDown.expected.css │ ├── slideInLeft.expected.css │ ├── slideOutDown.expected.css │ ├── fadeInDownBig.expected.css │ ├── fadeInLeftBig.expected.css │ ├── fadeInRightBig.expected.css │ ├── slideInRight.expected.css │ ├── slideOutLeft.expected.css │ ├── slideOutRight.expected.css │ ├── pulse.expected.css │ ├── rollIn.expected.css │ ├── bounceOutLeft.expected.css │ ├── bounceOutRight.expected.css │ ├── rotateOut.expected.css │ ├── rotateIn.expected.css │ ├── shake.expected.css │ ├── rotateOutUpLeft.expected.css │ ├── bounceOut.expected.css │ ├── rotateOutDownLeft.expected.css │ ├── rotateOutUpRight.expected.css │ ├── rotateOutDownRight.expected.css │ ├── rotateInUpLeft.expected.css │ ├── bounceOutUp.expected.css │ ├── rotateInUpRight.expected.css │ ├── bounceOutDown.expected.css │ ├── rotateInDownLeft.expected.css │ ├── rotateInDownRight.expected.css │ ├── zoomOutLeft.expected.css │ ├── zoomOutRight.expected.css │ ├── flipOutX.expected.css │ ├── flipOutY.expected.css │ ├── swing.expected.css │ ├── lightSpeedIn.expected.css │ ├── zoomInUp.expected.css │ ├── zoomInDown.expected.css │ ├── zoomInLeft.expected.css │ ├── zoomInRight.expected.css │ ├── tada.expected.css │ ├── zoomOutUp.expected.css │ ├── zoomOutDown.expected.css │ ├── rubberBand.expected.css │ ├── bounceInDown.expected.css │ ├── bounceInLeft.expected.css │ ├── bounceInRight.expected.css │ ├── bounce.css │ ├── bounceInUp.expected.css │ ├── bounce.expected.css │ ├── hinge.expected.css │ ├── flipInX.expected.css │ ├── flipInY.expected.css │ ├── wobble.expected.css │ ├── bounceIn.expected.css │ ├── bounce-atRoot.expected.css │ ├── jello.expected.css │ └── flip.expected.css └── test.js ├── .travis.yml ├── .editorconfig ├── gulpfile.js ├── index.js ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /test/fixtures/flip.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flip; 3 | } -------------------------------------------------------------------------------- /test/fixtures/tada.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: tada; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/flash.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flash; 3 | } -------------------------------------------------------------------------------- /test/fixtures/flipInX.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipInX; 3 | } -------------------------------------------------------------------------------- /test/fixtures/flipInY.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipInY; 3 | } -------------------------------------------------------------------------------- /test/fixtures/hinge.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: hinge; 3 | } -------------------------------------------------------------------------------- /test/fixtures/jello.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: jello; 3 | } -------------------------------------------------------------------------------- /test/fixtures/pulse.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: pulse; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rollIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rollIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rollOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rollOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/shake.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: shake; 3 | } -------------------------------------------------------------------------------- /test/fixtures/swing.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: swing; 3 | } -------------------------------------------------------------------------------- /test/fixtures/wobble.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: wobble; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/flipOutX.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipOutX; 3 | } -------------------------------------------------------------------------------- /test/fixtures/flipOutY.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipOutY; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideInUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInUpBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutUpBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: lightSpeedIn; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rubberBand.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rubberBand; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideInDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideInLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideInRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutUp.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutUp; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutRight; 3 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "5" 5 | - "4" -------------------------------------------------------------------------------- /test/fixtures/bounceInRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutDown; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInDownBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInLeftBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInRightBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutDownBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutLeftBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: lightSpeedOut; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInUpLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutRightBig; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInDownLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInDownRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInUpRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutDownLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutUpLeft; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutUpRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutDownRight; 3 | } -------------------------------------------------------------------------------- /test/fixtures/bounce-atRoot.css: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: 600px) { 2 | .foo { 3 | animation-name: bounce; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /test/fixtures/fadeIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeIn; 3 | } 4 | @keyframes fadeIn { 5 | from { 6 | opacity: 0; 7 | } 8 | to { 9 | opacity: 1; 10 | } 11 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOut; 3 | } 4 | @keyframes fadeOut { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | } 11 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /test/fixtures/flash.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flash; 3 | } 4 | @keyframes flash { 5 | from, 50%, to { 6 | opacity: 1; 7 | } 8 | 25%, 75% { 9 | opacity: 0; 10 | } 11 | } -------------------------------------------------------------------------------- /test/fixtures/zoomIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomIn; 3 | } 4 | @keyframes zoomIn { 5 | from { 6 | opacity: 0; 7 | transform: scale3d(.3, .3, .3); 8 | } 9 | 50% { 10 | opacity: 1; 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutUp; 3 | } 4 | @keyframes fadeOutUp { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(0, -100%, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutDown; 3 | } 4 | @keyframes fadeOutDown { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(0, 100%, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutLeft; 3 | } 4 | @keyframes fadeOutLeft { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(-100%, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutRight; 3 | } 4 | @keyframes fadeOutRight { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutUpBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutUpBig; 3 | } 4 | @keyframes fadeOutUpBig { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(0, -2000px, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutDownBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutDownBig; 3 | } 4 | @keyframes fadeOutDownBig { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(0, 2000px, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutLeftBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutLeftBig; 3 | } 4 | @keyframes fadeOutLeftBig { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(-2000px, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInUp; 3 | } 4 | @keyframes fadeInUp { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(0, 100%, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/fadeOutRightBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeOutRightBig; 3 | } 4 | @keyframes fadeOutRightBig { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(2000px, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/rollOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rollOut; 3 | } 4 | @keyframes rollOut { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/lightSpeedOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: lightSpeedOut; 3 | } 4 | @keyframes lightSpeedOut { 5 | from { 6 | opacity: 1; 7 | } 8 | to { 9 | transform: translate3d(100%, 0, 0) skewX(30deg); 10 | opacity: 0; 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInDown; 3 | } 4 | @keyframes fadeInDown { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(0, -100%, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInLeft; 3 | } 4 | @keyframes fadeInLeft { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(-100%, 0, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInRight; 3 | } 4 | @keyframes fadeInRight { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(100%, 0, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/slideInUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInUp; 3 | } 4 | @keyframes slideInUp { 5 | from { 6 | transform: translate3d(0, 100%, 0); 7 | visibility: visible; 8 | } 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutUp; 3 | } 4 | @keyframes slideOutUp { 5 | from { 6 | transform: translate3d(0, 0, 0); 7 | } 8 | to { 9 | visibility: hidden; 10 | transform: translate3d(0, -100%, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOut; 3 | } 4 | @keyframes zoomOut { 5 | from { 6 | opacity: 1; 7 | } 8 | 50% { 9 | opacity: 0; 10 | transform: scale3d(.3, .3, .3); 11 | } 12 | to { 13 | opacity: 0; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInUpBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInUpBig; 3 | } 4 | @keyframes fadeInUpBig { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(0, 2000px, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/slideInDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInDown; 3 | } 4 | @keyframes slideInDown { 5 | from { 6 | transform: translate3d(0, -100%, 0); 7 | visibility: visible; 8 | } 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/slideInLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInLeft; 3 | } 4 | @keyframes slideInLeft { 5 | from { 6 | transform: translate3d(-100%, 0, 0); 7 | visibility: visible; 8 | } 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutDown; 3 | } 4 | @keyframes slideOutDown { 5 | from { 6 | transform: translate3d(0, 0, 0); 7 | } 8 | to { 9 | visibility: hidden; 10 | transform: translate3d(0, 100%, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInDownBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInDownBig; 3 | } 4 | @keyframes fadeInDownBig { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(0, -2000px, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInLeftBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInLeftBig; 3 | } 4 | @keyframes fadeInLeftBig { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(-2000px, 0, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/fadeInRightBig.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: fadeInRightBig; 3 | } 4 | @keyframes fadeInRightBig { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(2000px, 0, 0); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/slideInRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideInRight; 3 | } 4 | @keyframes slideInRight { 5 | from { 6 | transform: translate3d(100%, 0, 0); 7 | visibility: visible; 8 | } 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutLeft; 3 | } 4 | @keyframes slideOutLeft { 5 | from { 6 | transform: translate3d(0, 0, 0); 7 | } 8 | to { 9 | visibility: hidden; 10 | transform: translate3d(-100%, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/slideOutRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: slideOutRight; 3 | } 4 | @keyframes slideOutRight { 5 | from { 6 | transform: translate3d(0, 0, 0); 7 | } 8 | to { 9 | visibility: hidden; 10 | transform: translate3d(100%, 0, 0); 11 | } 12 | } -------------------------------------------------------------------------------- /test/fixtures/pulse.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: pulse; 3 | } 4 | @keyframes pulse { 5 | from { 6 | transform: scale3d(1, 1, 1); 7 | } 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | to { 12 | transform: scale3d(1, 1, 1); 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rollIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rollIn; 3 | } 4 | @keyframes rollIn { 5 | from { 6 | opacity: 0; 7 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 8 | } 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutLeft; 3 | } 4 | @keyframes bounceOutLeft { 5 | 20% { 6 | opacity: 1; 7 | transform: translate3d(20px, 0, 0); 8 | } 9 | to { 10 | opacity: 0; 11 | transform: translate3d(-2000px, 0, 0); 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutRight; 3 | } 4 | @keyframes bounceOutRight { 5 | 20% { 6 | opacity: 1; 7 | transform: translate3d(-20px, 0, 0); 8 | } 9 | to { 10 | opacity: 0; 11 | transform: translate3d(2000px, 0, 0); 12 | } 13 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOut; 3 | } 4 | @keyframes rotateOut { 5 | from { 6 | transform-origin: center; 7 | opacity: 1; 8 | } 9 | to { 10 | transform-origin: center; 11 | transform: rotate3d(0, 0, 1, 200deg); 12 | opacity: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rotateIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateIn; 3 | } 4 | @keyframes rotateIn { 5 | from { 6 | transform-origin: center; 7 | transform: rotate3d(0, 0, 1, -200deg); 8 | opacity: 0; 9 | } 10 | to { 11 | transform-origin: center; 12 | transform: none; 13 | opacity: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/shake.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: shake; 3 | } 4 | @keyframes shake { 5 | from, to { 6 | transform: translate3d(0, 0, 0); 7 | } 8 | 10%, 30%, 50%, 70%, 90% { 9 | transform: translate3d(-10px, 0, 0); 10 | } 11 | 20%, 40%, 60%, 80% { 12 | transform: translate3d(10px, 0, 0); 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutUpLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutUpLeft; 3 | } 4 | @keyframes rotateOutUpLeft { 5 | from { 6 | transform-origin: left bottom; 7 | opacity: 1; 8 | } 9 | to { 10 | transform-origin: left bottom; 11 | transform: rotate3d(0, 0, 1, -45deg); 12 | opacity: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOut.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOut; 3 | } 4 | @keyframes bounceOut { 5 | 20% { 6 | transform: scale3d(.9, .9, .9); 7 | } 8 | 50%, 55% { 9 | opacity: 1; 10 | transform: scale3d(1.1, 1.1, 1.1); 11 | } 12 | to { 13 | opacity: 0; 14 | transform: scale3d(.3, .3, .3); 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutDownLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutDownLeft; 3 | } 4 | @keyframes rotateOutDownLeft { 5 | from { 6 | transform-origin: left bottom; 7 | opacity: 1; 8 | } 9 | to { 10 | transform-origin: left bottom; 11 | transform: rotate3d(0, 0, 1, 45deg); 12 | opacity: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutUpRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutUpRight; 3 | } 4 | @keyframes rotateOutUpRight { 5 | from { 6 | transform-origin: right bottom; 7 | opacity: 1; 8 | } 9 | to { 10 | transform-origin: right bottom; 11 | transform: rotate3d(0, 0, 1, 90deg); 12 | opacity: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rotateOutDownRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateOutDownRight; 3 | } 4 | @keyframes rotateOutDownRight { 5 | from { 6 | transform-origin: right bottom; 7 | opacity: 1; 8 | } 9 | to { 10 | transform-origin: right bottom; 11 | transform: rotate3d(0, 0, 1, -45deg); 12 | opacity: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInUpLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInUpLeft; 3 | } 4 | @keyframes rotateInUpLeft { 5 | from { 6 | transform-origin: left bottom; 7 | transform: rotate3d(0, 0, 1, 45deg); 8 | opacity: 0; 9 | } 10 | to { 11 | transform-origin: left bottom; 12 | transform: none; 13 | opacity: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutUp; 3 | } 4 | @keyframes bounceOutUp { 5 | 20% { 6 | transform: translate3d(0, -10px, 0); 7 | } 8 | 40%, 45% { 9 | opacity: 1; 10 | transform: translate3d(0, 20px, 0); 11 | } 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, -2000px, 0); 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInUpRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInUpRight; 3 | } 4 | @keyframes rotateInUpRight { 5 | from { 6 | transform-origin: right bottom; 7 | transform: rotate3d(0, 0, 1, -90deg); 8 | opacity: 0; 9 | } 10 | to { 11 | transform-origin: right bottom; 12 | transform: none; 13 | opacity: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/bounceOutDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceOutDown; 3 | } 4 | @keyframes bounceOutDown { 5 | 20% { 6 | transform: translate3d(0, 10px, 0); 7 | } 8 | 40%, 45% { 9 | opacity: 1; 10 | transform: translate3d(0, -20px, 0); 11 | } 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, 2000px, 0); 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInDownLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInDownLeft; 3 | } 4 | @keyframes rotateInDownLeft { 5 | from { 6 | transform-origin: left bottom; 7 | transform: rotate3d(0, 0, 1, -45deg); 8 | opacity: 0; 9 | } 10 | to { 11 | transform-origin: left bottom; 12 | transform: none; 13 | opacity: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/rotateInDownRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rotateInDownRight; 3 | } 4 | @keyframes rotateInDownRight { 5 | from { 6 | transform-origin: right bottom; 7 | transform: rotate3d(0, 0, 1, 45deg); 8 | opacity: 0; 9 | } 10 | to { 11 | transform-origin: right bottom; 12 | transform: none; 13 | opacity: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutLeft; 3 | } 4 | @keyframes zoomOutLeft { 5 | 40% { 6 | opacity: 1; 7 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 8 | } 9 | to { 10 | opacity: 0; 11 | transform: scale(.1) translate3d(-2000px, 0, 0); 12 | transform-origin: left center; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutRight; 3 | } 4 | @keyframes zoomOutRight { 5 | 40% { 6 | opacity: 1; 7 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 8 | } 9 | to { 10 | opacity: 0; 11 | transform: scale(.1) translate3d(2000px, 0, 0); 12 | transform-origin: right center; 13 | } 14 | } -------------------------------------------------------------------------------- /test/fixtures/flipOutX.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipOutX; 3 | } 4 | @keyframes flipOutX { 5 | from { 6 | transform: perspective(400px); 7 | } 8 | 30% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | opacity: 1; 11 | } 12 | to { 13 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 14 | opacity: 0; 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/flipOutY.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipOutY; 3 | } 4 | @keyframes flipOutY { 5 | from { 6 | transform: perspective(400px); 7 | } 8 | 30% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 10 | opacity: 1; 11 | } 12 | to { 13 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 14 | opacity: 0; 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/swing.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: swing; 3 | } 4 | @keyframes swing { 5 | 20% { 6 | transform: rotate3d(0, 0, 1, 15deg); 7 | } 8 | 40% { 9 | transform: rotate3d(0, 0, 1, -10deg); 10 | } 11 | 60% { 12 | transform: rotate3d(0, 0, 1, 5deg); 13 | } 14 | 80% { 15 | transform: rotate3d(0, 0, 1, -5deg); 16 | } 17 | to { 18 | transform: rotate3d(0, 0, 1, 0deg); 19 | } 20 | } -------------------------------------------------------------------------------- /test/fixtures/lightSpeedIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: lightSpeedIn; 3 | } 4 | @keyframes lightSpeedIn { 5 | from { 6 | transform: translate3d(100%, 0, 0) skewX(-30deg); 7 | opacity: 0; 8 | } 9 | 60% { 10 | transform: skewX(20deg); 11 | opacity: 1; 12 | } 13 | 80% { 14 | transform: skewX(-5deg); 15 | opacity: 1; 16 | } 17 | to { 18 | transform: none; 19 | opacity: 1; 20 | } 21 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInUp; 3 | } 4 | @keyframes zoomInUp { 5 | from { 6 | opacity: 0; 7 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | 60% { 11 | opacity: 1; 12 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 13 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInDown; 3 | } 4 | @keyframes zoomInDown { 5 | from { 6 | opacity: 0; 7 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | 60% { 11 | opacity: 1; 12 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 13 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInLeft; 3 | } 4 | @keyframes zoomInLeft { 5 | from { 6 | opacity: 0; 7 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | 60% { 11 | opacity: 1; 12 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 13 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/zoomInRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomInRight; 3 | } 4 | @keyframes zoomInRight { 5 | from { 6 | opacity: 0; 7 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | 60% { 11 | opacity: 1; 12 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 13 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 14 | } 15 | } -------------------------------------------------------------------------------- /test/fixtures/tada.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: tada; 3 | } 4 | @keyframes tada { 5 | from { 6 | transform: scale3d(1, 1, 1); 7 | } 8 | 10%, 20% { 9 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 10 | } 11 | 30%, 50%, 70%, 90% { 12 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 13 | } 14 | 40%, 60%, 80% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 16 | } 17 | to { 18 | transform: scale3d(1, 1, 1); 19 | } 20 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutUp; 3 | } 4 | @keyframes zoomOutUp { 5 | 40% { 6 | opacity: 1; 7 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | to { 11 | opacity: 0; 12 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 13 | transform-origin: center bottom; 14 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/zoomOutDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: zoomOutDown; 3 | } 4 | @keyframes zoomOutDown { 5 | 40% { 6 | opacity: 1; 7 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 8 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 9 | } 10 | to { 11 | opacity: 0; 12 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 13 | transform-origin: center bottom; 14 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 15 | } 16 | } -------------------------------------------------------------------------------- /test/fixtures/rubberBand.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: rubberBand; 3 | } 4 | @keyframes rubberBand { 5 | from { 6 | transform: scale3d(1, 1, 1); 7 | } 8 | 30% { 9 | transform: scale3d(1.25, 0.75, 1); 10 | } 11 | 40% { 12 | transform: scale3d(0.75, 1.25, 1); 13 | } 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 65% { 18 | transform: scale3d(.95, 1.05, 1); 19 | } 20 | 75% { 21 | transform: scale3d(1.05, .95, 1); 22 | } 23 | to { 24 | transform: scale3d(1, 1, 1); 25 | } 26 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInDown.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInDown; 3 | } 4 | @keyframes bounceInDown { 5 | from, 60%, 75%, 90%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | } 8 | 0% { 9 | opacity: 0; 10 | transform: translate3d(0, -3000px, 0); 11 | } 12 | 60% { 13 | opacity: 1; 14 | transform: translate3d(0, 25px, 0); 15 | } 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 90% { 20 | transform: translate3d(0, 5px, 0); 21 | } 22 | to { 23 | transform: none; 24 | } 25 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInLeft.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInLeft; 3 | } 4 | @keyframes bounceInLeft { 5 | from, 60%, 75%, 90%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | } 8 | 0% { 9 | opacity: 0; 10 | transform: translate3d(-3000px, 0, 0); 11 | } 12 | 60% { 13 | opacity: 1; 14 | transform: translate3d(25px, 0, 0); 15 | } 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 90% { 20 | transform: translate3d(5px, 0, 0); 21 | } 22 | to { 23 | transform: none; 24 | } 25 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInRight.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInRight; 3 | } 4 | @keyframes bounceInRight { 5 | from, 60%, 75%, 90%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | } 8 | from { 9 | opacity: 0; 10 | transform: translate3d(3000px, 0, 0); 11 | } 12 | 60% { 13 | opacity: 1; 14 | transform: translate3d(-25px, 0, 0); 15 | } 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 90% { 20 | transform: translate3d(-5px, 0, 0); 21 | } 22 | to { 23 | transform: none; 24 | } 25 | } -------------------------------------------------------------------------------- /test/fixtures/bounce.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounce; 3 | } 4 | @keyframes bounce { 5 | from, 20%, 53%, 80%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | transform: translate3d(0,0,0); 8 | } 9 | 40%, 43% { 10 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 11 | transform: translate3d(0, -30px, 0); 12 | } 13 | 70% { 14 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 15 | transform: translate3d(0, -15px, 0); 16 | } 17 | 90% { 18 | transform: translate3d(0,-4px,0); 19 | } 20 | } -------------------------------------------------------------------------------- /test/fixtures/bounceInUp.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceInUp; 3 | } 4 | @keyframes bounceInUp { 5 | from, 60%, 75%, 90%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | } 8 | from { 9 | opacity: 0; 10 | transform: translate3d(0, 3000px, 0); 11 | } 12 | 60% { 13 | opacity: 1; 14 | transform: translate3d(0, -20px, 0); 15 | } 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 90% { 20 | transform: translate3d(0, -5px, 0); 21 | } 22 | to { 23 | transform: translate3d(0, 0, 0); 24 | } 25 | } -------------------------------------------------------------------------------- /test/fixtures/bounce.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounce; 3 | } 4 | @keyframes bounce { 5 | from, 20%, 53%, 80%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | transform: translate3d(0,0,0); 8 | } 9 | 40%, 43% { 10 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 11 | transform: translate3d(0, -30px, 0); 12 | } 13 | 70% { 14 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 15 | transform: translate3d(0, -15px, 0); 16 | } 17 | 90% { 18 | transform: translate3d(0,-4px,0); 19 | } 20 | } -------------------------------------------------------------------------------- /test/fixtures/hinge.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: hinge; 3 | } 4 | @keyframes hinge { 5 | 0% { 6 | transform-origin: top left; 7 | animation-timing-function: ease-in-out; 8 | } 9 | 20%, 60% { 10 | transform: rotate3d(0, 0, 1, 80deg); 11 | transform-origin: top left; 12 | animation-timing-function: ease-in-out; 13 | } 14 | 40%, 80% { 15 | transform: rotate3d(0, 0, 1, 60deg); 16 | transform-origin: top left; 17 | animation-timing-function: ease-in-out; 18 | opacity: 1; 19 | } 20 | to { 21 | transform: translate3d(0, 700px, 0); 22 | opacity: 0; 23 | } 24 | } -------------------------------------------------------------------------------- /test/fixtures/flipInX.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipInX; 3 | } 4 | @keyframes flipInX { 5 | from { 6 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 7 | animation-timing-function: ease-in; 8 | opacity: 0; 9 | } 10 | 40% { 11 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 12 | animation-timing-function: ease-in; 13 | } 14 | 60% { 15 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 16 | opacity: 1; 17 | } 18 | 80% { 19 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 20 | } 21 | to { 22 | transform: perspective(400px); 23 | } 24 | } -------------------------------------------------------------------------------- /test/fixtures/flipInY.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flipInY; 3 | } 4 | @keyframes flipInY { 5 | from { 6 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 7 | animation-timing-function: ease-in; 8 | opacity: 0; 9 | } 10 | 40% { 11 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 12 | animation-timing-function: ease-in; 13 | } 14 | 60% { 15 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 16 | opacity: 1; 17 | } 18 | 80% { 19 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 20 | } 21 | to { 22 | transform: perspective(400px); 23 | } 24 | } -------------------------------------------------------------------------------- /test/fixtures/wobble.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: wobble; 3 | } 4 | @keyframes wobble { 5 | from { 6 | transform: none; 7 | } 8 | 15% { 9 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 10 | } 11 | 30% { 12 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 13 | } 14 | 45% { 15 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 16 | } 17 | 60% { 18 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 19 | } 20 | 75% { 21 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 22 | } 23 | to { 24 | transform: none; 25 | } 26 | } -------------------------------------------------------------------------------- /test/fixtures/bounceIn.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: bounceIn; 3 | } 4 | @keyframes bounceIn { 5 | from, 20%, 40%, 60%, 80%, to { 6 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 7 | } 8 | 0% { 9 | opacity: 0; 10 | transform: scale3d(.3, .3, .3); 11 | } 12 | 20% { 13 | transform: scale3d(1.1, 1.1, 1.1); 14 | } 15 | 40% { 16 | transform: scale3d(.9, .9, .9); 17 | } 18 | 60% { 19 | opacity: 1; 20 | transform: scale3d(1.03, 1.03, 1.03); 21 | } 22 | 80% { 23 | transform: scale3d(.97, .97, .97); 24 | } 25 | to { 26 | opacity: 1; 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var gulp = require("gulp"), 4 | eslint = require("gulp-eslint"), 5 | mocha = require("gulp-mocha"); 6 | 7 | gulp.task("lint", function () { 8 | return gulp.src(["index.js", "test/*.js", "gulpfile.js"]) 9 | .pipe(eslint()) 10 | .pipe(eslint.format()) 11 | .pipe(eslint.failAfterError()); 12 | }); 13 | 14 | gulp.task("test", function () { 15 | return gulp.src("test/*.js", { read: false }).pipe(mocha({reporter: "nyan"})); 16 | }); 17 | 18 | gulp.task("watch", function() { 19 | gulp.watch("**/*.js", ["check"] ); 20 | }); 21 | 22 | gulp.task("check", ["lint", "test"]); 23 | gulp.task("default", ["check", "watch"]); 24 | -------------------------------------------------------------------------------- /test/fixtures/bounce-atRoot.expected.css: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: 600px) { 2 | .foo { 3 | animation-name: bounce; 4 | } 5 | } 6 | @keyframes bounce { 7 | from, 20%, 53%, 80%, to { 8 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 9 | transform: translate3d(0,0,0); 10 | } 11 | 40%, 43% { 12 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 13 | transform: translate3d(0, -30px, 0); 14 | } 15 | 70% { 16 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 17 | transform: translate3d(0, -15px, 0); 18 | } 19 | 90% { 20 | transform: translate3d(0,-4px,0); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /test/fixtures/jello.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: jello; 3 | } 4 | @keyframes jello { 5 | from, 11.1%, to { 6 | transform: none; 7 | } 8 | 22.2% { 9 | transform: skewX(-12.5deg) skewY(-12.5deg); 10 | } 11 | 33.3% { 12 | transform: skewX(6.25deg) skewY(6.25deg); 13 | } 14 | 44.4% { 15 | transform: skewX(-3.125deg) skewY(-3.125deg); 16 | } 17 | 55.5% { 18 | transform: skewX(1.5625deg) skewY(1.5625deg); 19 | } 20 | 66.6% { 21 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 22 | } 23 | 77.7% { 24 | transform: skewX(0.390625deg) skewY(0.390625deg); 25 | } 26 | 88.8% { 27 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 28 | } 29 | } -------------------------------------------------------------------------------- /test/fixtures/flip.expected.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | animation-name: flip; 3 | } 4 | @keyframes flip { 5 | from { 6 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 7 | animation-timing-function: ease-out; 8 | } 9 | 40% { 10 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 11 | animation-timing-function: ease-out; 12 | } 13 | 50% { 14 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 15 | animation-timing-function: ease-in; 16 | } 17 | 80% { 18 | transform: perspective(400px) scale3d(.95, .95, .95); 19 | animation-timing-function: ease-in; 20 | } 21 | to { 22 | transform: perspective(400px); 23 | animation-timing-function: ease-in; 24 | } 25 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"); 4 | var keyframes = require("postcss-animation-data"); 5 | 6 | module.exports = postcss.plugin("postcss-animation", function () { 7 | var hasKeyframes = []; 8 | 9 | function appendKeyframes(css,value){ 10 | if (!keyframes[value] || hasKeyframes[value]){ 11 | return; 12 | } 13 | if(!hasKeyframes[value]){ 14 | hasKeyframes[value] = true; 15 | css.append(keyframes[value]) 16 | } 17 | } 18 | 19 | return function (css) { 20 | 21 | hasKeyframes = []; 22 | 23 | css.walkDecls("animation-name", function(decl) { 24 | var thisRule = decl.parent; 25 | var value = decl.value; 26 | appendKeyframes(css,value); 27 | }); 28 | 29 | css.walkDecls("animation", function(decl) { 30 | var thisRule = decl.parent; 31 | var values = postcss.list.space(decl.value); 32 | values.forEach(function (value) { 33 | appendKeyframes(css,value); 34 | }); 35 | }); 36 | }; 37 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-animation", 3 | "version": "0.0.12", 4 | "description": "PostCSS plugin that adds `@keyframes` from animate.css.", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "animation", 10 | "keyframes" 11 | ], 12 | "license": "MIT", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/zhouwenbin/postcss-animation.git" 16 | }, 17 | "author": "zhouwenbin ", 18 | "maintainers": [ 19 | { 20 | "name": "zhouwenbin", 21 | "email": "zwb86@qq.com", 22 | "web": "http://zhouwenbin.com" 23 | } 24 | ], 25 | "bugs": { 26 | "url": "https://github.com/zhouwenbin/postcss-animation/issues" 27 | }, 28 | "homepage": "https://github.com/zhouwenbin/postcss-animation", 29 | "dependencies": { 30 | "postcss": "^5.0", 31 | "postcss-animation-data": "^0.0.4" 32 | }, 33 | "devDependencies": { 34 | "chai": "^3.2.0", 35 | "gulp": "^3.9.0", 36 | "gulp-eslint": "^1.0.0", 37 | "gulp-mocha": "^2.1.3" 38 | }, 39 | "scripts": { 40 | "test": "gulp check" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var postcss = require("postcss"), 4 | expect = require("chai").expect, 5 | fs = require("fs"), 6 | path = require("path"), 7 | plugin = require("../"), 8 | keyframes = require("postcss-animation-data"); 9 | 10 | var test = function (fixture, opts, done) { 11 | var input = fixture + ".css", 12 | expected = fixture + ".expected.css"; 13 | var opts = {atRoot: true}; 14 | 15 | input = fs.readFileSync(path.join(__dirname, "fixtures", input), "utf8"); 16 | expected = fs.readFileSync(path.join(__dirname, "fixtures", expected), "utf8"); 17 | 18 | postcss([ plugin(opts) ]) 19 | .process(input) 20 | .then(function (result) { 21 | expect(result.css).to.eql(expected); 22 | console.log(result.warnings()); 23 | expect(result.warnings()).to.be.empty; 24 | done(); 25 | }).catch(function (error) { 26 | done(error); 27 | }); 28 | 29 | }; 30 | 31 | describe("postcss-animation", function () { 32 | 33 | for(var i in keyframes){ 34 | it("sets animation-name: "+ i +" correctly", function(done) { 35 | test(i, {}, done); 36 | }); 37 | } 38 | 39 | }); 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PostCSS animation 2 | [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] 3 | 4 | [PostCSS][PostCSS] PostCSS plugin that adds `@keyframes` from [animate.css](https://github.com/daneden/animate.css). 5 | 6 | ```css 7 | .foo { 8 | animation-name: bounce; 9 | } 10 | ``` 11 | 12 | ```css 13 | .foo { 14 | animation-name: bounce; 15 | } 16 | @keyframes bounce { 17 | from, 20%, 53%, 80%, to { 18 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 19 | transform: translate3d(0,0,0); 20 | } 21 | 40%, 43% { 22 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 23 | transform: translate3d(0, -30px, 0); 24 | } 25 | 70% { 26 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 27 | transform: translate3d(0, -15px, 0); 28 | } 29 | 90% { 30 | transform: translate3d(0,-4px,0); 31 | } 32 | } 33 | ``` 34 | 35 | -- 36 | 37 | ## Usage 38 | 39 | ```js 40 | postcss([ require('postcss-animation') ]) 41 | ``` 42 | 43 | See [PostCSS][PostCSS] docs for examples for your environment. 44 | 45 | ### gulp 46 | 47 | see this [example](https://github.com/zhouwenbin/postcss-animation-example) 48 | 49 | -- 50 | 51 | ### License 52 | 53 | MIT © [zhouwenbin](http://zhouwenbin.com) 54 | 55 | -- 56 | 57 | ### Thanks 58 | 59 | [animate.css](https://github.com/daneden/animate.css) 60 | 61 | [npm-image]: https://badge.fury.io/js/postcss-animation.svg 62 | [npm-url]: https://npmjs.org/package/postcss-animation 63 | [travis-image]: https://travis-ci.org/zhouwenbin/postcss-animation.svg?branch=master 64 | [travis-url]: https://travis-ci.org/zhouwenbin/postcss-animation 65 | [daviddm-image]: https://david-dm.org/zhouwenbin/postcss-animation.svg?theme=shields.io 66 | [daviddm-url]: https://david-dm.org/zhouwenbin/postcss-animation 67 | [PostCSS]: https://github.com/postcss/postcss 68 | --------------------------------------------------------------------------------