Same animation but with keyframes vs transitions.

1 files changed, 16 insertions, 8 deletions

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 {