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.

115 lines
4.5 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>Animationen</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>
Animationen mit CSS
</h2>
<p>
Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes
lassen sich relativ einfach Objekte erstellen,
die sich über die Webseite bewegen.
</p>
<p>
Schrift kann außerdem gedreht und verschoben werden. <br>
Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender.
</p>
</section>
<section>
<div id="beispiel"></div>
<br>
<div class="code-example">
<code>
#example2 { <br>
&emsp;#beispiel{ <br>
&emsp;&emsp;background-color: aqua; <br>
&emsp;&emsp;color: black; <br>
&emsp;&emsp;border: 3px solid rgb(255, 0, 0); <br>
&emsp;&emsp;border-radius: 0.4em; <br>
&emsp;&emsp;animation-timing-function: ease; <br>
&emsp;&emsp;width: 100px; <br>
&emsp;&emsp;height: 100px; <br>
&emsp;&emsp;animation-name: beispiel; <br>
&emsp;&emsp;animation-duration: 5s; <br>
&emsp;&emsp;animation-iteration-count: infinite; <br>
&emsp;&emsp;animation-direction: alternate; <br>
&emsp;&emsp;text-align: center; <br>
&emsp;&emsp;align-self: end; <br>
&emsp;&emsp;&position: relative; <br>
&emsp;} <br>
<br>
&emsp;@keyframes beispiel { <br>
&emsp;&emsp;0% { <br>
&emsp;&emsp;&emsp;transform: rotate(0deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;25% { <br>
&emsp;&emsp;&emsp;transform: rotate(90deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;&emsp;background-color: blue; <br>
&emsp;&emsp;&emsp;border-color: orange; <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;50% { <br>
&emsp;&emsp;&emsp;transform: scale(1.5); <br>
&emsp;&emsp;&emsp;background-color: blueviolet; <br>
&emsp;&emsp;&emsp;border-color: green; <br>
&emsp;&emsp;&emsp;transform: rotate(180deg); <br>
&emsp;&emsp;&emsp;left:var(--width1); <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;75% { <br>
&emsp;&emsp;&emsp;transform: rotate(270deg); <br>
&emsp;&emsp;&emsp;left:var(--width1); <br>
&emsp;&emsp;&emsp;background-color: red; <br>
&emsp;&emsp;&emsp;border-color: lightblue; <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;100% { <br>
&emsp;&emsp;&emsp;background-color: yellow; <br>
&emsp;&emsp;&emsp;border-color: pink; <br>
&emsp;&emsp;&emsp;transform: rotate(360deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;} <br>
&emsp;} <br>
}
</code>
</div>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Leon Ehricht</p>
</footer>
</body>
</html>