Beispiel:Transition-4.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>transition-timing-function</title> <style> /* Rennstrecke */ .formula-1 { background: grey; /* Farbangabe wirkt auf die Beschriftungen der Autos und der Steuerungslinks */ color: black; margin: 1em 0; padding: 2em; width: var(--track-length);
overflow: hidden;
}
/* Rennspuren */ .formula-1 aside { padding: 0 0 10px 0; position: relative; }
.formula-1 aside:after { position: absolute; content: " "; height: 0.2em; width: 100%; background-image: repeating-linear-gradient( to right, transparent, transparent 30px, white 30px, white 50px ); bottom: -10px; }
/* Karosserie der Autos */ .formula-1 aside p { border: thin solid #333; border-radius: 50% / 100%; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; font-size: 1rem; padding: 0.2em; position: relative; text-align: center; width: var(--car-length); transition-property: translate; transition-duration: 3s; }
/* Autoreifen */ .formula-1 aside p:after, .formula-1 aside p:before { position: absolute; color: black; content: "●"; font-size: 2em; width: 1em; height: 1em; top: 7px; }
.formula-1 aside p:after { right: 10px; }
.formula-1 aside p:before { left: 0; }
.formula-1 .ease p { background: red; color: white; transition-timing-function: linear; }
.formula-1 .linear p { background: gold; transition-timing-function: linear; }
.formula-1 .ease-in p { background: lightyellow; transition-timing-function: ease-in; }
.formula-1 .ease-out p { background: #74943a; transition-timing-function: ease-out; }
.formula-1 .ease-in-out p { background: steelblue; color: white; transition-timing-function: ease-in-out; }
.formula-1 .steps p { background: purple; color: white; transition-timing-function: steps(10); }
- go:checked ~ .formula-1 aside p {
translate: calc(var(--track-length) - var(--car-length)); }
.formula-1 aside p { margin: 20px 0 5px; }
.trigger input {
display: none;
}
.trigger {
display: inline-block; padding: .5rem 1rem; background: red; color: white; cursor: pointer; margin-bottom: 1rem;
} .trigger .reset {
display: none;
}
/* when checked */
- go:checked + .trigger .start {
display: none;
}
- go:checked + .trigger .reset {
display: inline;
}
- root {
--car-length: 6em; --track-length: 50em;
} </style> </head> <body>
Autorennen mit transition-timing-function
<main>
Formel 1: Wer ist am Schnellsten?
<input type="checkbox" id="go" hidden>
<label for="go" class="trigger">
Los! Zurück!
</label>
<section class="formula-1"> <aside class="ease">
ease
</aside> <aside class="linear">
linear
</aside> <aside class="ease-in">
ease In
</aside> <aside class="ease-out">
ease Out
</aside> <aside class="ease-in-out">
ease In-Out
</aside> <aside class="steps">
steps
</aside> </section>
Alle Autos kommen gleichzeitig nach 3 Sekunden ins Ziel!
</main> </body> </html>
