Beispiel:CSS3 animation-3a.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 {
	animation: rennen 3s infinite 2s;
}
 
.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;
}

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

  100% {
    transform: translate(25em);
  }
}

  </style>
</head>

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

  <main id="go">
    <h2>Formel 1: Wer ist am schnellsten?</h2>

    <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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_animation-3a.html&oldid=68746“