Beispiel:CSS3 animation-5.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" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>animation-delay</title>
<style>
main {
overflow: hidden;
}
/* Karosserie der Autos */
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;
margin-left: -200px;
-webkit-animation: rennen linear infinite;
animation: rennen linear infinite;
}
/* Autoreifen */
p:after,
p:before {
position: absolute;
color: black;
content: "●";
font-size: 2em;
width: 1em;
height: 1em;
top: 7px;
}
p:after {
right: 10px;
}
p:before {
left: 10px;
}
p:nth-of-type(1) {
background: #dfac20;
-webkit-animation-duration: 6s;
-webkit-animation-delay: -2s;
animation-duration: 6s;
animation-delay: -2s;
}
p:nth-of-type(2) {
background: #ffebe6;
border: 1px solid red;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 0;
animation-duration: 5s;
animation-delay: 0;
}
p:nth-of-type(3) {
border: 1px solid black;
background: white;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
animation-duration: 3s;
animation-delay: 2s;
}
p:nth-of-type(4) {
background: #5a9900;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 1s;
animation-duration: 4s;
animation-delay: 1s;
}
@keyframes rennen {
0% {
transform: translate(0);
}
100% {
transform: translate(980px);
}
}
</style>
</head>
<body id="go">
<h1>Verwendung von <code>animation-delay</code></h1>
<main>
<h2>Formel 1: Wer ist am schnellsten?</h2>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
</main>
</body>
</html>
