Minor animation fixes (#12123)

ampproject · Dec 6, 2017 · f8a0801 · f8a0801
1 parent 3cdea30
commit f8a0801
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/extensions/amp-story/0.1/amp-story-hint.css b/extensions/amp-story/0.1/amp-story-hint.css
@@ -19,7 +19,7 @@
   transition-duration: 200ms !important;
 }
 
-[desktop].i-amphtml-story-hint-container {
+[desktop] .i-amphtml-story-hint-container {
   display: none !important;
 }
 
@@ -49,9 +49,16 @@
   flex: 1 !important;
 }
 
+.show-first-page-overlay .prev-page {
+  background: rgba(0,0,0,0.8) !important;
+}
 .next-page {
   flex: 3 !important;
-  border-left: 1px dashed white !important;
+  border-left: 1px dashed transparent;
+  border-image-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" version="1.1"><line x1="0" y1="0" x2="0" y2="30" fill-rule="evenodd" stroke-width="1" fill="none" stroke-linecap="square" stroke-dasharray="6,6" stroke="white"></line></svg>');
+  border-image-slice: 33% 33%;
+  border-image-repeat: repeat;
+  border-image-width: 14px;
 }
 
 .show-navigation-overlay .i-amphtml-story-navigation-help-overlay,
@@ -101,7 +108,7 @@
 }
 
 .i-amphtml-story-hint-tap-icon:before {
-  animation: expandingBubble 800ms infinite ease-out !important;
+  animation: expandingBubble 1000ms infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .i-amphtml-story-hint-tap-icon:after {
@@ -126,14 +133,19 @@
 }
 
 @keyframes expandingBubble {
-  from {
+  0% {
     transform: scale(1);
     opacity: 0;
   }
 
-  to {
+  50% {
     transform: scale(1.5);
     opacity: 1;
   }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }
 
diff --git a/extensions/amp-story/0.1/amp-story-hint.js b/extensions/amp-story/0.1/amp-story-hint.js
@@ -81,7 +81,7 @@ const NAVIGATION_OVERLAY_CLASS = 'show-navigation-overlay';
 const FIRST_PAGE_OVERLAY_CLASS = 'show-first-page-overlay';
 
 /** @type {number} */
-const NAVIGATION_OVERLAY_TIMEOUT = 2000;
+const NAVIGATION_OVERLAY_TIMEOUT = 3000;
 
 /**
  * User Hint Layer for <amp-story>.