From 9c0f4f95eacff10169113a2b2e9b8bc6ce05a389 Mon Sep 17 00:00:00 2001 From: Mylloon Date: Mon, 24 Apr 2023 15:43:00 +0200 Subject: [PATCH] goofier anim --- static/css/web3.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/static/css/web3.css b/static/css/web3.css index 3cbc768..fd34e1b 100644 --- a/static/css/web3.css +++ b/static/css/web3.css @@ -1,3 +1,7 @@ +:root { + --anim-type: cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite normal none running; /* Quadratic */ +} + html { background-image: url("../pics/bg-web3.gif"); background-repeat: revert; @@ -13,7 +17,7 @@ div#scroll-text { text-align: right; white-space: nowrap; - animation: marquee 8s linear infinite; + animation: 8s var(--anim-type) marquee; } div#scroll-banner > div#scroll-text > * { @@ -27,23 +31,23 @@ div#scroll-banner > div#scroll-text > * { } to { - transform: translateX(-140%); + transform: translateX(-150%); } } @media only screen and (max-width: 850px) { /* Mobile display */ div#scroll-text { - animation: marquee 9s linear infinite; + animation: 9s var(--anim-type) marquee_min; } - @keyframes marquee { + @keyframes marquee_min { from { transform: translateX(100%); } to { - transform: translateX(-210%); + transform: translateX(-320%); } } }