goofier anim

This commit is contained in:
Mylloon 2023-04-24 15:43:00 +02:00
parent d470c2939a
commit 9c0f4f95ea
Signed by: Anri
GPG key ID: A82D63DFF8D1317F

View file

@ -1,3 +1,7 @@
:root {
--anim-type: cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite normal none running; /* Quadratic */
}
html { html {
background-image: url("../pics/bg-web3.gif"); background-image: url("../pics/bg-web3.gif");
background-repeat: revert; background-repeat: revert;
@ -13,7 +17,7 @@ div#scroll-text {
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
animation: marquee 8s linear infinite; animation: 8s var(--anim-type) marquee;
} }
div#scroll-banner > div#scroll-text > * { div#scroll-banner > div#scroll-text > * {
@ -27,23 +31,23 @@ div#scroll-banner > div#scroll-text > * {
} }
to { to {
transform: translateX(-140%); transform: translateX(-150%);
} }
} }
@media only screen and (max-width: 850px) { @media only screen and (max-width: 850px) {
/* Mobile display */ /* Mobile display */
div#scroll-text { div#scroll-text {
animation: marquee 9s linear infinite; animation: 9s var(--anim-type) marquee_min;
} }
@keyframes marquee { @keyframes marquee_min {
from { from {
transform: translateX(100%); transform: translateX(100%);
} }
to { to {
transform: translateX(-210%); transform: translateX(-320%);
} }
} }
} }