Restarting the animation every time the page becomes active.

ampproject · Jan 31, 2019 · ccb6b73 · ccb6b73
1 parent 6fbbb2f
commit ccb6b73
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
@@ -844,7 +844,15 @@ amp-story .amp-video-eq,
   }
 }
 
+/**
+ * Hiding the element and only showing it on the active page so the animation
+ * triggers every time the page becomes active.
+ */
 amp-story-page .i-amphtml-story-page-open-attachment {
+  display: none !important;
+}
+
+amp-story-page[active] .i-amphtml-story-page-open-attachment {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -879,7 +887,7 @@ amp-story-page .i-amphtml-story-page-open-attachment-icon::after {
   left: 0 !important;
   height: 100% !important;
   width: 100% !important;
-  background: #FFF;
+  background: #FFF !important;
   border-radius: 100% !important;
   z-index: -1 !important;
   animation: open-attachment-icon-explode 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both !important;