Beispiel:CSS3 animation-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<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>animation-timing-function</title>
  <style>
/* Rennstrecke */
.formula-1  {
}
 
/* Karosserie der Autos */
.formula-1 p {
	background: #dfac20;
	border: 1px solid #333;
	border-radius: 50% / 100%;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	font-size: 16px;
	padding: 0.2em;
	position: relative;
	text-align: center;
	width: 100px;
}
 
/* Autoreifen */
.formula-1 p:after,
.formula-1 p:before {
	position: absolute;
	color: black;
	content: "●";
	font-size: 2em;
	width: 1em;
	height: 1em;
	top: 7px;
}
 
.formula-1 p:after {
	right: 10px;
}
 
.formula-1 p:before {
	left: 10px;
}
 
.formula-1 .linear  {
	background: #c32e04;
}
 
.formula-1 .ease-in  {
	background: #3983ab;
}
 
.formula-1 .ease-out  {
	border: 1px solid black;
	background: white;
}
 
.formula-1 .ease-in-out  {
	background: #5a9900;
}

#go:target .formula-1 p.linear  {
	animation-timing-function: linear;
}
 
#go:target .formula-1 p.ease-in  {
	animation-timing-function: ease-in;
}
 
#go:target .formula-1 p.ease-out  {
	animation-timing-function: ease-out;
}
 
#go:target .formula-1 p.ease-in-out  {
	animation-timing-function: ease-in-out;
}
 
@keyframes rennen {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(780px);
  }
}

#go:target .formula-1 p {
	-webkit-animation: rennen 3s;
	animation: rennen 3s;
}

/* Steuerungslinks */
a[href="#go"],
a[href="#reset"] {
	padding: 5px 10px;
	background: white;
	border-radius: 1em;
	text-decoration: none;
}

/* Hover-Zustand der Steuerungslinks */
a[href="#go"]:hover,
a[href="#reset"]:hover {
	background: mistyrose;
	color: red;
}
  </style>
</head>

<body>
  <h1>Verwendung von <code>animation-timing-function</code></h1>

  <main id="go">
    <h2>Formel 1: Wer ist am schnellsten?</h2>
    <p><a href="#go">Los!</a> <a href="#reset">Zurück auf Start!</a></p>

    <section class="formula-1">
	  <p class="ease">ease</p>
	  <p class="linear">linear</p>
	  <p class="ease-in">ease In</p>
	  <p class="ease-out">ease Out</p>
	  <p class="ease-in-out">ease In-Out</p>
     </section>
     
     <p>Alle Autos kommen gleichzeitig nach 3 Sekunden ins Ziel!</p>
  </main>

</body>
</html>