feat: add fadeInDown animation

Author: streamich

.storybook/animate.stories.js

@@ -5,12 +5,15 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../index');
 const {addon: addonRule} = require('../addon/rule');
 const {addon: addonKeyframes} = require('../addon/keyframes');
-const {addon: addonFadeIn} = require('../addon/animate/fadeIn');
+
+const animations = [
+    'fadeIn',
+    'fadeInDown',
+];
 
 const nano = create();
 addonRule(nano);
 addonKeyframes(nano);
-addonFadeIn(nano);
 const {rule} = nano;
 
 var className = rule({
@@ -19,7 +22,11 @@ var className = rule({
     background: 'red',
 });
 
-storiesOf('Addons/Animate', module)
-    .add('fadeIn', () =>
-        h('div', {className: 'fadeIn' + className}, 'Hello world')
-    )
+let stories = storiesOf('Addons/Animate', module);
+
+animations.forEach(name => {
+    stories = stories.add(name, () => {
+        require('../addon/animate/' + name).addon(nano);
+        return h('div', {className: name + className});
+    });
+});

addon/animate/fadeInDown.js

@@ -0,0 +1,25 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeInDown': {
+            from: {
+                opacity: 0,
+                transform: 'translate3d(0, -10%, 0)'
+            },
+
+            to: {
+                opacity: 1,
+                transform: 'translate3d(0, 0, 0)',
+            }
+        },
+
+        '.fadeInDown': {
+            animation: 'fadeInDown .3s',
+        }
+    });
+};