LT-275: Finishing measure flow styles and animations

Packages/design/app.styl

@@ -1,3 +1,4 @@
+@import "{design}/styles/imports/animations"
 @import "{design}/styles/imports/mixins"
 @import "{design}/styles/imports/spacings"
 @import "{design}/styles/imports/variables"

Packages/design/package.js

@@ -26,6 +26,7 @@ Package.onUse(function(api) {
     // Common styles
     api.addFiles([
         'styles/common/webfonts.styl',
+        'styles/common/keyframes.styl',
         'styles/common/global.styl',
         'styles/common/spacings.styl'
     ], 'client');

Packages/design/styles/common/keyframes.styl

@@ -0,0 +1,10 @@
+@import "{design}/app.styl"
+
+@keyframes zoomInOut {
+    from {
+        transform(scale(0))
+    }
+    to {
+        transform(scale(1))
+    }
+}

Packages/design/styles/imports/animations.styl

@@ -0,0 +1,7 @@
+animateZoomIn()
+  animation-name: zoomInOut
+  animation-duration: 0.3s
+  animation-iteration-count: 1
+  animation-direction: alternate
+  animation-timing-function: ease-out
+  animation-fill-mode: forwards