<!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>  #beispiel{ <br>   background-color: aqua; <br>   color: black; <br>   border: 3px solid rgb(255, 0, 0); <br>   border-radius: 0.4em; <br>   animation-timing-function: ease; <br>   width: 100px; <br>   height: 100px; <br>   animation-name: beispiel; <br>   animation-duration: 5s; <br>   animation-iteration-count: infinite; <br>   animation-direction: alternate; <br>   text-align: center; <br>   align-self: end; <br>   &position: relative; <br>  } <br> <br>  @keyframes beispiel { <br>   0% { <br>    transform: rotate(0deg); <br>    left:var(--width2); <br>   } <br> <br>   25% { <br>    transform: rotate(90deg); <br>    left:var(--width2); <br>    background-color: blue; <br>    border-color: orange; <br>   } <br> <br>   50% { <br>    transform: scale(1.5); <br>    background-color: blueviolet; <br>    border-color: green; <br>    transform: rotate(180deg); <br>    left:var(--width1); <br>   } <br> <br>   75% { <br>    transform: rotate(270deg); <br>    left:var(--width1); <br>    background-color: red; <br>    border-color: lightblue; <br>   } <br> <br>   100% { <br>    background-color: yellow; <br>    border-color: pink; <br>    transform: rotate(360deg); <br>    left:var(--width2); <br>   } <br>  } <br> } </code> </div> </section> </article> </main> <footer> <p>Erstellt von: Leon Ehricht</p> </footer> </body> </html>