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: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; }

  1. go:target .formula-1 p.linear {

animation-timing-function: linear; }

  1. go:target .formula-1 p.ease-in {

animation-timing-function: ease-in; }

  1. go:target .formula-1 p.ease-out {

animation-timing-function: ease-out; }

  1. go:target .formula-1 p.ease-in-out {

animation-timing-function: ease-in-out; }

@keyframes rennen { 

 0% {
   transform: translate(0);
 }

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

}

  1. go:target .formula-1 p {

-webkit-animation: rennen 3s; animation: rennen 3s; }

/* Steuerungslinks */ a[href="#go"], a[href="#reset"] { padding: 5px 10px; background: #eee; 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>

Verwendung von animation-timing-function

 <main id="go">

Formel 1: Wer ist am schnellsten?

<a href="#go">Los!</a> <a href="#reset">Zurück auf Start!</a>

   <section class="formula-1">

ease

linear

ease In

ease Out

ease In-Out

    </section>

Alle Autos kommen gleichzeitig nach 3 Sekunden ins Ziel!

 </main>

</body> </html>

Abgerufen am 18.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS3_animation-3.html"