diff --git a/css/inhalt/bestenliste.css b/css/inhalt/bestenliste.css index 012f371e..0d99d235 100644 --- a/css/inhalt/bestenliste.css +++ b/css/inhalt/bestenliste.css @@ -14,6 +14,7 @@ --margin: calc(var(--height) / 2); --kleine-box-margin-left: 24%; --große-box-margin-left: calc(1 * var(--rang-breite-max) * 1.4); + --transition-dauer: .4s; position: relative; } @@ -97,12 +98,15 @@ width: 100%; --prozent: 0; --rang: 0; - order: var(--prozent); /* Reihenfolge unabhängig vom DOM beeinflussen */ + order: var(--rang); /* Reihenfolge unabhängig vom DOM beeinflussen */ display: flex; align-items: center; position: absolute; margin-top: var(--top); + transition-timing-function: ease-in-out; + transition-duration: var(--transition-dauer); + transition-property: margin-top, border-width; --background: #555; --background-lighter: #656565; @@ -139,7 +143,9 @@ Eingekreiste Zahl (Rang) text-shadow: 0 0 2px #22222299; font-weight: bold; font-size: calc(var(--rang-breite) / 2); - /*transition: transform .2s ease-in-out;*/ + transition-timing-function: ease-in-out; + transition-duration: var(--transition-dauer); + transition-property: width, height, font-size, margin-left, border-color, background, color; } /** @@ -156,10 +162,11 @@ Name und Schule position: absolute; height: var(--height); min-height: var(--height); - /*margin: calc(var(--gap) / 2) 0;*/ - /*margin: 0;*/ left: var(--left); - /*top: var(--top);*/ + transition-timing-function: ease-in-out; + transition-duration: var(--transition-dauer); + transition-property: left, transform, font-size; + transition-delay: calc(var(--transition-dauer) / 2); transform: translateX(var(--translate-x)); white-space: nowrap; @@ -191,6 +198,9 @@ Fahrrad-Icon height: 100%; /* kann benutzt werden, damit Fahrräder sich nicht berühren bei --gap-vertical: 0 */ width: calc((var(--gap-track-inhalt) - var(--gap-fahrrad-inhalt)) * 2); + transition-timing-function: ease-in-out; + transition-duration: var(--transition-dauer); + transition-property: width, margin-left; background-image: var(--url); background-size: contain; @@ -239,6 +249,9 @@ Track (Balken) und Streckenanzeige width: 100vw; transform: translateX(-100%); margin-left: calc(-1 * var(--gap-track-inhalt)); + transition-timing-function: ease-in-out; + transition-duration: var(--transition-dauer); + transition-property: height, padding-right, margin-left, font-size, background-image; background-image: linear-gradient(135deg, var(--background) 48%, var(--background-lighter), var(--background) 52%); background-size: 200% 100%;