|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Keyframes</title>
|
|
|
|
|
<link rel="stylesheet" href="../../css/layout.css">
|
|
|
|
|
<link rel="stylesheet" href="../../css/animations.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Animationen</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="../home.html">Home</a>
|
|
|
|
|
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
|
|
|
|
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
|
|
|
|
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
|
|
|
|
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
|
|
|
|
<a href="animations.html">Animationen</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="animations.html">Animation Einführung</a>
|
|
|
|
|
<a href="keyframes.html">Animations Funktionen</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<main>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
CSS @Keyframes
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der Funktion @Keyframes lassen sich Objekte
|
|
|
|
|
auf einer Webseite Animieren. Diese Objekte können sich dann wie gewünscht
|
|
|
|
|
auf der Seite bewegen, drehen und blinken.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example1 { <br>  @keyframes stempel1 { <br>
|
|
|
|
|
  0%{ <br>
|
|
|
|
|
   transform: scale(1) rotate(10deg)<br>
|
|
|
|
|
  }<br>
|
|
|
|
|
|
|
|
|
|
  50%{<br>
|
|
|
|
|
   transform: scale(1.5) rotate(30deg);<br>
|
|
|
|
|
  }<br>
|
|
|
|
|
|
|
|
|
|
  100%{<br>
|
|
|
|
|
   transform: scale(1) rotate(10deg)<br>
|
|
|
|
|
  }<br>
|
|
|
|
|
 } <br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="stempel1">Genehmigt</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Delay
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der Funktion "animation-delay" wird die Verzögerung angegeben, nach der die Animation beginnen
|
|
|
|
|
soll,
|
|
|
|
|
nachdem zum Beispiel die Webseite geladen wurde. <br>
|
|
|
|
|
Die Zeit wird hierbei in Sekunden angegeben.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example2 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-delay: 5s; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Duration
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der Funktion "animation-duration" kann die Zeitspanne angegeben werden,
|
|
|
|
|
die die Animation laufen soll.<br>
|
|
|
|
|
Auch hier wird die Zeit in Sekunden angegeben.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example3 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-druration: 5s; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="beispiel6">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p id="beispiel7">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Bei diesem Beispiel dauert die erste Animation 5 Sekunden und die zweite 10 Sekunden.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Iteration Count
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Durch die Funktion "animation-iteration-count" lässt sich die Anzahl an Durchläufen angeben.
|
|
|
|
|
Dadurch läuft die Animation eine bestimmte Anzahl Malen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example4 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-iteration-count: infinit; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Direction
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Die "animation-direction" Funktion bringt die Möglichkeit mit sich,
|
|
|
|
|
die Animation vorwärts oder Rückwärts abzuspielen.
|
|
|
|
|
Es ist auch Möglich die Animation erst Vorwärts
|
|
|
|
|
und dann Rückwärts oder andres herum abzuspielen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example5 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-direction: normal; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="beispiel4">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p id="beispiel5">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Hier dreht sich die erste Animation nach rechts
|
|
|
|
|
(normal) und die zweite nach links (reverse).
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Timing-Function
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Mit "animation-timing-function" lässt sich bestimmen,
|
|
|
|
|
ob sich die Animation am Anfang, am Ende oder in der Mitte schneller
|
|
|
|
|
oder langsamer bewegt.
|
|
|
|
|
Außerdem kann die Animation auch immer gleichschnell durchlaufen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example6 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-timing-function: linear; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="beispiel1">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p id="beispiel2">
|
|
|
|
|
Example
|
|
|
|
|
</p>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Die erste Animation bewegt sich immer gleich schnell (linear)
|
|
|
|
|
und die zweite am Anfang und am Ende schneller als in der Mitte (ease).
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animation Fill-Mode
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Durch die "animation-fill-mode" Funktion kann
|
|
|
|
|
die Animation einen Style bekommen
|
|
|
|
|
ohne das die Animation abgespielt wird. Es ist möglich zum Beispiel
|
|
|
|
|
das erste oder letzte Bild als dauerhaften Style
|
|
|
|
|
für die stillstehende Animation zu nehmen.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example7 { <br>
|
|
|
|
|
 #beispiel {<br>
|
|
|
|
|
  position: relative;<br>
|
|
|
|
|
  animation-name: stempel1;<br>
|
|
|
|
|
  animation-fill-mode: forwards; <br>
|
|
|
|
|
 }<br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p> Erstellt von: Leon Ehricht</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
