pres: box on fragment

jitsedesmet · Jun 17, 2024 · 95ad89d · 95ad89d
1 parent fbf3990
commit 95ad89d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/presentation/final-assets/custom.css b/presentation/final-assets/custom.css
@@ -33,6 +33,9 @@
     z-index: 99;
     offset-path: path('M -65 68 H 500 Q 625 68 625 10');
     offset-rotate: 0deg;
+}
+
+.animated-message.visible {
     animation: move 5000ms infinite forwards ease-in-out;
 }
 

diff --git a/presentation/final-presentation.html b/presentation/final-presentation.html
@@ -168,20 +168,20 @@ <h3>Research Question and Hypothesis</h3>
 
     <p>
         "How can we
-        <span class="fragment highlight-current-red" data-fragment-index="1">
+        <span class="fragment highlight-current-red" data-fragment-index="2">
 abstract data updates
 </span> over a
-        <span class="fragment highlight-current-red" data-fragment-index="2">
+        <span class="fragment highlight-current-red" data-fragment-index="3">
 document oriented interface
 </span> of a
-        <span class="fragment highlight-current-red" data-fragment-index="3">
+        <span class="fragment highlight-current-red" data-fragment-index="4">
 permissioned
 </span>
-        <span class="fragment highlight-current-red" data-fragment-index="4">
+        <span class="fragment highlight-current-red" data-fragment-index="5">
 decentralized environment
 </span>
         behind a
-        <span class="fragment highlight-current-red" data-fragment-index="5">
+        <span class="fragment highlight-current-red" data-fragment-index="6">
 query abstraction layer
 </span>?"
     </p>
@@ -192,7 +192,7 @@ <h3>Research Question and Hypothesis</h3>
 
 
         <div style="height: 150px; width: 200px">
-            <div class="animated-message"></div>
+            <div class="animated-message fragment fade-in-then-out" data-fragment-index="1"></div>
             <div style="height: 100%; width: 100%; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
             </div>
         </div>