From 53a11f43225c2f8d7a28295339ab70c7ce2225f8 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Thu, 22 Oct 2020 15:49:13 +0300
Subject: Improve timeline page animation

Instead of just leaving all elements like they are when
bounce-in is done, when they leave from view, make them bounce out
and hidden again to let them bounce-in again.
---
 pydis_site/static/css/home/timeline.css | 80 +++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

(limited to 'pydis_site/static/css/home')

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 07e17e15..c7137fde 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -3652,6 +3652,14 @@ mark {
         -webkit-animation-name: cd-bounce-2-inverse;
         animation-name: cd-bounce-2-inverse
     }
+    .cd-timeline__img--bounce-out {
+        -webkit-animation: cd-bounce-out-1 0.6s;
+        animation: cd-bounce-out-1 0.6s;
+    }
+    .cd-timeline__content--bounce-out {
+        -webkit-animation: cd-bounce-out-2 0.6s;
+        animation: cd-bounce-out-2 0.6s;
+    }
 }
 
 @-webkit-keyframes cd-bounce-1 {
@@ -3755,3 +3763,75 @@ mark {
         transform: translateX(0)
     }
 }
+
+@-webkit-keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2)
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5)
+    }
+}
+
+@keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+}
+
+@-webkit-keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
+
+@keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
-- 
cgit v1.2.3