fix (navbar,contextmenu): animation demo is not working.

Closes ngOfficeUIFabric#402
s-KaiNet · Jul 27, 2016 · 0975287 · 0975287
1 parent a206af1
commit 0975287
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 0 deletions.
diff --git a/src/components/contextualmenu/demo/styles.css b/src/components/contextualmenu/demo/styles.css
@@ -31,4 +31,46 @@
     position: relative;
     width: 180px;
     z-index: 105;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes slideRightIn40 {
+  from {
+    transform: translate3d(-40px, 0px, 0px);
+  }
+
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+@-webkit-keyframes scaleDown98 {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    transform: scale3d(0.98, 0.98, 1);
+  }
 }
diff --git a/src/components/navbar/demo/styles.css b/src/components/navbar/demo/styles.css
@@ -34,4 +34,46 @@
 .ms-NavBar-item.ms-NavBar-item--search.is-open-add, .ms-NavBar-item.ms-NavBar-item--search.is-open-remove{
   -webkit-transition: all .2s;
 	transition: all .2s;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes slideRightIn40 {
+  from {
+    transform: translate3d(-40px, 0px, 0px);
+  }
+
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+@-webkit-keyframes scaleDown98 {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    transform: scale3d(0.98, 0.98, 1);
+  }
 }