subtle caption animation

move the caption around a bit to try and lessen screen burn
artsmia · Mar 21, 2019 · 90f8963 · 90f8963
1 parent 0551617
commit 90f8963
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/template/index.html b/template/index.html
@@ -41,6 +41,12 @@
   max-width: 43%;
   line-height: 3.7em;
   text-align: right;
+
+  animation-name: moveText;
+  animation-duration: 99s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
 }
 
 .caption {
@@ -55,6 +61,24 @@
   font-family: MiaGrotesk-Bold;
 }
 
+@keyframes moveText {
+   from {
+     transform: translate3d(0, 0, 0);
+   }
+   23% { 
+     transform: translate3d(0, -3em, 0);
+   }
+   47% {
+     transform: translate3d(-3em, -3em, 0);
+   }
+   77% {
+     transform: translate3d(-3em, 0, 0);
+   }
+   to {
+     transform: translate3d(0, 0, 0);
+   }
+}
+
 #timer {
   position: absolute;
 	bottom: 0.5em;