diff options
author | blendoit <blendoit@gmail.com> | 2020-01-29 07:44:22 -0800 |
---|---|---|
committer | blendoit <blendoit@gmail.com> | 2020-01-29 07:44:22 -0800 |
commit | 812a6d4890507803d294a4b87c56372ce33c64b0 (patch) | |
tree | 9195c0ae522d6d95b0ecb9949e3ebe5cbe4f777f | |
parent | c8263cf37b9ff5642d3182f1f12c61f599eaae59 (diff) |
Same animation but with keyframes vs transitions.
-rw-r--r-- | app/static/styles/home.css | 24 |
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 { |