From 812a6d4890507803d294a4b87c56372ce33c64b0 Mon Sep 17 00:00:00 2001
From: blendoit <blendoit@gmail.com>
Date: Wed, 29 Jan 2020 07:44:22 -0800
Subject: Same animation but with keyframes vs transitions.

---
 app/static/styles/home.css | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

(limited to 'app/static')

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index 9fa4e94..d18729d 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -9,7 +9,7 @@
 .tab-yes:hover ~ .feed-post {
     left: 6%;
     right: 0%;
-    transition: var(--fast-transition);
+    transition: var(--fast-speed);
 }
 .tab-no {
     height: 100%;
@@ -21,7 +21,7 @@
 .tab-no:hover ~ .feed-post {
     left: 0%;
     right: 6%;
-    transition: var(--fast-transition);
+    transition: var(--fast-speed);
 }
 
 /* Feed of posts. */
@@ -48,6 +48,10 @@
     perspective-origin: bottom;
 }
 
+@keyframes post {
+    0% {}
+    100% {overflow: auto; height: 40%;}
+}
 .post {
     position: relative;
     height: 70%;
@@ -57,23 +61,27 @@
     padding: 1rem;
     margin: 1rem;
     overflow: hidden;
-    transition-duration: var(--fast-speed);
 }
 .post:hover {
-    overflow: auto;
-    height: 40%;
+    animation-name: post;
+    animation-duration: var(--med-speed);
+    animation-fill-mode: both;
 }
 .post:hover + .btn-wrapper {
-    opacity: 100%;
-    transform: rotateX(0deg);
+    animation-name: btn-wrapper;
+    animation-duration: var(--med-speed);
+    animation-fill-mode: both;
 }
 
+@keyframes btn-wrapper {
+    0% {}
+    100% {transform: rotateX(0deg); opacity: 100%;}
+}
 .btn-wrapper {
     position: relative;
     z-index: 1;
     opacity: 0%;
     transform: rotateX(-90deg);
-    transition-duration: var(--med-speed);
 }
 
 .btn-yes {
-- 
cgit v1.2.3