<!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>