You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

253 lines
8.3 KiB
HTML

<!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> &emsp;@keyframes stempel1 { <br>
&emsp;&emsp;0%{ <br>
&emsp;&emsp;&emsp;transform: scale(1) rotate(10deg)<br>
&emsp;&emsp;}<br>
&emsp;&emsp;50%{<br>
&emsp;&emsp;&emsp;transform: scale(1.5) rotate(30deg);<br>
&emsp;&emsp;}<br>
&emsp;&emsp;100%{<br>
&emsp;&emsp;&emsp;transform: scale(1) rotate(10deg)<br>
&emsp;&emsp;}<br>
&emsp;} <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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-delay: 5s; <br>
&emsp;}<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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-druration: 5s; <br>
&emsp;}<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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-iteration-count: infinit; <br>
&emsp;}<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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-direction: normal; <br>
&emsp;}<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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-timing-function: linear; <br>
&emsp;}<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>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-fill-mode: forwards; <br>
&emsp;}<br>
}
</code>
</div>
</section>
</article>
</main>
<footer>
<p> Erstellt von: Leon Ehricht</p>
</footer>
</body>
</html>