docs: add animation docs

.storybook/css/Button.tsx

@@ -1,24 +1,20 @@
 import {Component, createElement as h} from 'react';
 import css from '../../src/react/css';
 
-@css
 @css({
     width: '320px',
+    borderRadius: '5px',
+    border: 'none',
+    outline: 'none',
+    '&:hover': {
+        color: '#fff',
+    },
+    '&:active': {
+        position: 'relative',
+        top: '2px',
+    },
 })
 class Button extends Component<any, any> {
-    static css = {
-        borderRadius: '5px',
-        border: 'none',
-        outline: 'none',
-        '&:hover': {
-            color: '#fff',
-        },
-        '&:active': {
-            position: 'relative',
-            top: '2px',
-        },
-    };
-
     @css(function({props}) {
         return {
             padding: '20px',

README.md

@@ -31,6 +31,7 @@ it is *lightning fast*, *lean*, and with *gazillion* [__*feat*ures__](#feat).
 - __[Atoms](./docs/en/feat/atoms.md)__
 - [__Media queries__, keyframes, ...](./docs/en/feat/media.md)
 - [__Global__ styles](./docs/en/feat/global.md)
+- Global [entry and exit animations](./docs/en/feat/animation.md)
 - [CSS __resets__](./docs/en/feat/resets.md)
 - __[Theming](./docs/en/feat/theming.md)__
 

docs/en/animation.md

@@ -0,0 +1,19 @@
+# Entry and Exit Animations
+
+Expose below classes to easily do entry and exit animations:
+
+- `fiOpacity` — enter by changing opacity.
+- `fiAll` — enter by scaling and changing opacity.
+- `foOpacity` — exit by changing opacity.
+- `foAll` — exit by scaling and changing opacity.
+
+
+## Usage
+
+```jsx
+import CssFadeInAnimations from 'freestyler/lib/globals/CssFadeInAnimations';
+import CssFadeOutAnimations from 'freestyler/lib/globals/CssFadeOutAnimations';
+
+<CssFadeInAnimations />
+<CssFadeOutAnimations />
+```