AWV-3: Adding CSS3 animations to the CINE dialog

Packages/design/styles/common/keyframes.styl

@@ -1,19 +1,41 @@
 @import "{design}/app.styl"
 
 @keyframes zoomIn
-  from
-    transform(scale(0))
-  to
-    transform(scale(1))
+    0%
+        transform(scale(0))
+    100%
+        transform(scale(1))
+
+@keyframes zoomOut
+    0%
+        transform(scale(1))
+    100%
+        transform(scale(0))
+
+@keyframes slideInDown
+    0%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
+    100%
+        opacity: 1
+        transform(translateY(0) scale(1))
+
+@keyframes slideOutUp
+    0%
+        opacity: 1
+        transform(translateY(0) scale(1))
+    100%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
 
 @keyframes fadeIn
-  from
-    opacity: 0
-  to
-    opacity: 1
+    from
+        opacity: 0
+    to
+        opacity: 1
 
 @keyframes fadeOut
-  from
-    opacity: 1
-  to
-    opacity: 0
+    from
+        opacity: 1
+    to
+        opacity: 0