Beispiel:CSS3 transition1.html
Aus SELFHTML-Wiki
<!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:SELFHTML-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;
/* main-Element hat 10px padding + 1px border */
margin: 1em -11px;
padding: 2em;
width: 876px;
}
/* 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 {
background: silver;
border: 1px solid #333;
border-radius: 50% / 100%;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
color: currentColor;
font-size: 16px;
padding: 0.2em;
position: relative;
text-align: center;
width: 100px;
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 .linear p {
background: red;
transition-timing-function: linear;
}
.formula-1 .ease-in p {
background: yellow;
transition-timing-function: ease-in;
}
.formula-1 .ease-out p {
border: 1px solid black;
background: white;
transition-timing-function: ease-out;
}
.formula-1 .ease-in-out p {
background: orange;
transition-timing-function: ease-in-out;
}
#go:target ~ .formula-1 aside p {
transform: translate(780px);
}
.formula-1 aside p {
margin: 20px 0 5px;
}
/* Steuerungslinks */
a[href="#go"],
a[href="#reset"] {
box-shadow: 0 0 5px black;
padding: 5px 10px;
background: white;
color: currentColor;
border-radius: 1em;
text-decoration: none;
font-size: 1.2em;
margin: 10px 0;
display: inline-block;
}
/* Hover-Zustand der Steuerungslinks */
a[href="#go"]:hover,
a[href="#reset"]:hover {
background: mistyrose;
color: red;
}
</style>
</head>
<body>
<h1>Verwendung von <code>transition-timing-function</code></h1>
<main>
<h2>Formel 1: Wer ist am Schnellsten?</h2>
<a href="#go" id="go">Los!</a> <a href="#reset">Zurück auf Start!</a>
<section class="formula-1">
<aside class="ease">
<p>Ease</p>
</aside>
<aside class="linear">
<p>Linear</p>
</aside>
<aside class="ease-in">
<p>Ease In</p>
</aside>
<aside class="ease-out">
<p>Ease Out</p>
</aside>
<aside class="ease-in-out">
<p>Ease In-Out</p>
</aside>
</section>
<p>Alle Autos kommen gleichzeitig nach 3 Sekunden ins Ziel!</p>
</main>
</body>
</html>
